css实现三维立体折叠菜单效果代码-html代码-BFW代码库

css实现三维立体折叠菜单效果代码

代码语言：html

代码描述：css实现三维立体折叠菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  
<style>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
/***** [Variables] *****/
/* Geometry */
/* Colors */
/* Text */
/* Mixins */
/***** [Setup] *****/
body {
  font-family: "Raleway";
  background: #C8F7C5;
}

.scene {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  perspective: 1800px;
}

.menu {
  position: relative;
  width: inherit;
  height: inherit;
  transform: rotateX(45deg) rotateZ(45deg);
  transform-style: preserve-3d;
  /***** [Menu open state] *****/
  /* Show each layer's text */
  /**** [Hover state] *****/
  /***** [Layer styling] *****/
}
.menu input[type=checkbox] {
  visibility: hidden;
}
input[type=checkbox]:checked ~ .menu__layer label .layer__content {
  visibility: visible;
}
.menu input[type=checkbox]:checked ~ .top {
  transform: translate3d(-200px, 0, 40px);
  /* Hide the menu icon */
}
.menu input[type=checkbox]:checked ~ .top label .icon {
  visibility: hidden;
}
.menu input[type=checkbox]:checked ~ .middle {
  transform: translate3d(0, 0, 40px);
}
.menu input[type=checkbox]:checked ~ .bottom {
  transform: translate3d(200px, 0, 40px);
  /* Hide the shadow */
}
.menu input[type=checkbox]:checked ~ .bottom:after {
  visibility: hidden;
}
.menu:hover .menu__layer.top {
  transform: translateZ(120px);
}
.menu:hover .menu__layer.middle {
  transform: translateZ(80px);
}
.menu:hover .menu__layer.bottom {
  transform: translateZ(40px);
  /* Show the shadow */
}
.menu:hover .menu__layer.bottom:after {
  visibility: visible;
}
.menu__layer {
  position: absolute;
  width: inherit;
  height: inherit;
  transition: all 200ms ease;
}
..........完整代码请登录后点击上方下载按钮下载查看