纯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-transform: UPPERCASE;
    font-family: 'Typicons', sans-serif;
    text-shadow: 0 1px 0 #222;
    }
  .menu:before {
    content: 'o';
    transform-origin: 50% 100%;
    transform:
      rotateX(-90deg);
    }
  .menu:after {
    content: '\005C';
    pointer-events: none;
    transform-origin: 50% 0%;
    transform:
      translateY(105%);
    }
  .menu > a {
    display: inline-block;
    margin-right: -4px;
    width: 20%;
    height: 100%;
    background-color: #222;
    }
    [class*="typicons-"]:before {
      position: absolute;
      top: 0; left: 0;
      height: 100%;
      width: 100%;
      font-family: 'Typicons', sans-serif;
      color: white;
      font-size: 2em;
      text-align: center;
      line-height: 60px;
      }
  .menu > a:hover {
    background-color: #444;
    }
..........完整代码请登录后点击上方下载按钮下载查看