纯css实现立体翻转菜单效果代码-html代码-BFW代码库

纯css实现立体翻转菜单效果代码

代码语言：html

代码描述：纯css实现立体翻转菜单效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
@import url(http://weloveiconfonts.com/api/?family=typicons);

*, *:after, *:before {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  }

::-webkit-scrollbar {width:10px}
::-webkit-scrollbar-thumb {background: hsla(0,0%,20%,1);}
::-webkit-scrollbar-track {background: transparent}

html, body {
  height: 100%;
  }

body {
  background-image:
    linear-gradient(
      90deg,
      hsla(5,40%,50%,1),
      transparent,
      hsla(295,40%,40%,1)
      ),
    linear-gradient(
      180deg,
      hsla(65,40%,70%,1),
      hsla(185,40%,50%,1)
      );
  }
  body * {
    transform-style: preserve-3D;
    }

.container {
  height: 300px;
  width: 300px;
  perspective: 100em;
  perspective-origin: 50% 50px;
  
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  }
.menu, .content {  
  transition: transform .3s;
  }
.menu {
  height: 50px;
  transform-origin: 50% 100%;
  transform:
    rotateX(90deg);
  font-family: sans-serif;
  }
  .menu:before, .menu:after {  
    position: absolute;
    bottom: 0; left: 0;
    color: hsla(0,0%,100%,1);
    font-size: 1.6em;
    text-.........完整代码请登录后点击上方下载按钮下载查看