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

代码语言：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;
    }
.menu:hover {
  transform: none;
  }
  .menu:hover + .content {
    transform: 
      rotateX(-90deg);
    }

.content {
  background: white;
  background: 
    radial-gradient(
      circle,
      white 80%,
      hsla(0,0%,100%,.6)
      );
  box-shadow: 0 1px 0 hsla(0,0%,0%,.3);
  overflow: hidden;
  transform-origin: 50% 0%;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  }
  .content > p {
    height: 250px;
    padding: 15px;
    white-space: pre-wrap;
    font-family: monospace;
    color: #555;
    overflow: auto;
    }
</style>



</head>

<body translate="no" >
  <div class='container'>
  <div class='menu'>
    <a href='#' title='reply' class='typicons-back'></a>
    <a href='#' title='forward' class='typicons-forward'></a>
    <a href='#' title='move' class='typicons-archive'></a>
    <a href='#' title='trash' class='typicons-delete'></a>
    <a href='#' title='back to inbox' class='typicons-times'></a>
  </div>
  <div class='content'>
    <!-- http://www.imperial-library.info/content/loveletter-fifth-era-true-purpose-tamriel -->
    <p>Ald Sotha Below, 5E911
House Sul Progenitor House, duly noted under the digital house,
Whirling School Prefect Approved
Chronocule Delivery: souljewel count: 78888-00-00-00-000

My name is Jubal-lun-Sul, of House Sul, whose name is known and heard throughout the Scathing Bay and the Nine times Nine Thrones. Our lord is High Alma Jaroon, of House Jaroon, whose city is the First City of the New North, where all who Went Under from Landfall settled and made peace with the Worm, when we were not Eighty and One separate peoples but One, carrying the tibrols on our back together and cutting tunnels by the light and heat that all mer wore, with equal dust in every mouth. My family’s name comes from the first child born in the Velothiid, Haeko-dol-Sul, and, like him, we are salt merchants. Our crest is the tusk of the bat-tiger. Our bloodline is registered by C0DA.

The Digitals say we come from another star, but so many have forgotten. I have not, for my lineage granted me audience with Memory, and I have spoken with the Wheels of Lull. I have seen proof, as any who come Up during Landfall Season, when the winds die down enough Above that all may make pilgrimage under the banner of Vehk and Vehk. Though many Above have renounced Memory, they too remember.

--

I tell you now, brothers and sisters of the coming 4th, that the holy Scripture of Love contains all you need to avoid the perils of the Landfall. By chronocules granted by the ‘neers of Lull, this warning is given freely and by Love. Sermon 35 begins properly:

“The formulas of proper Velothi magic continue in ancient tradition, but that virility is dead, by which I mean at least replaced. Truth owes its medicinal nature to the establishment of the myth of justice. Its curative properties it likewise owes to the concept of sacrifice. Princes, chiefs, and angels all subscribe to the same notion. This is a view primarily based on a prolific abolition of an implied profanity, seen in ceremonies, knife fighting, hunting, and the exploration of the poetic. On the ritual of occasions, which comes to us from the days of the cave glow, I can say nothing more than to loosen your equation of moods to lunar currency.”

The C0DA broke when Twice Vehk appeared again from Aether, but they captured enough of Him to render the words stable again. In this passage, He describes the goal of the Lunar God, who some of you still ascribe the name “Lorkhan”. When stabilized, the words become proof:

All creation is subgradient. First was Void, which became split by AE. Anu and Padomay came next and with their first brush came the Aurbis.

Void to Aurbis: naught to pattern.

“Later, and by that I mean much, much later, my reign will be seen as an act of the highest love, which is a return from the astral destiny and the marriages between. By that I mean the catastrophes, which will come from all five corners. Subsequent are the revisions, differentiated between hope and the distraught, situations that are only required by the periodic death of the immu.........完整代码请登录后点击上方下载按钮下载查看