Cube menu
EDITORIAL I non-professional front-end for the effects of interest css to achieve, so the code does not appear pleasant to the eye place also hope forgive me and criticism. (Please add number of micro-channel public interest concerns access to resources - maps end of the article)
Html initialization frame
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>立方体菜单</title>
<style>
* {
margin: 0;
padding: 0;
}
.div_outer {
perspective: none;
-webkit-perspective: none;
perspective-origin: 50% 50%;
}
.warp {
width: 1000px;
height: 1000px;
margin: 250px auto;
position: relative;
transform-style: preserve-3d;
}
.box {
width: 100%;
height: 100%;
border: 2px solid #303133;
text-align: center;
font-weight: bold;
color: #fff;
position: absolute;
top: 150px;
left: 150px;
border-radius: 1.2rem;
box-shadow: #303133 0 0 1rem
}
.box1 {
background: #303133;
transform: rotateY(0deg) translateZ(500px);
}
.box2 {
background: #303133;
transform: rotateY(0deg) translateZ(-500px);
}
.box3 {
background: #303133;
transform: rotateX(90deg) translateZ(-500px);
}
.box4 {
background: #303133;
transform: rotateX(90deg) translateZ(500px);
}
.box5 {
background: #303133;
transform: rotateY(90deg) translateZ(500px);
}
.box6 {
background: #303133;
transform: rotateY(90deg) translateZ(-500px);
}
.box ul {
list-style: none;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.box ul li {
height: 25%;
width: 25%;
}
.box ul li i {
font-size: 1rem;
margin: 1.5rem auto;
}
</style>
</head>
<body>
<div class="cube_div">
<div class="div_outer">
<div id="menu" class="warp">
<div class="box box1">
<ul>
<li></li>
<li></li>
<li></li>
<li><i class="">首页</i></li>
<li class="to_left"><i>左边</i></li>
<li class="to_right"><i>右边</i></li>
<li class="to_top"><i></i>上边</li>
<li class="to_bottom"><i>下边</i></li>
<li><i class=""></i></li>
<li><i class=""></i></li>
<li><i class=""></i></li>
<li><i class=""></i></li>
<li><i class=""></i></li>
<li><i class=""></i></li>
<li><i class=""></i></li>
<li><i class=""></i></li>
</ul>
</div>
<div class="box box2">
</div>
<div class="box box3">
</div>
<div class="box box4">
</div>
<div class="box box5">
</div>
<div class="box box6">
</div>
</div>
</div>
</div>
</body>
</html>
The above code to create the six sides were, respectively, as the six faces of a cube.
16 there is employed on each side is divided into small blocks can accommodate 16-click menu plane.
Debugging can be seen showing the effect of the following effects:
Add Click rotational motion
- Click on the left there is the case of rotation as the rest of the way to face action consistent with the principles
defined to_left style, because all current angular position of rotation is 0, the purpose of rotation is to click on the option on the left side of 90 degrees
and therefore additional click here the actions to be performed rotate left 90deg
.warp.to_left {
animation-name: to_left;
-webkit-animation-name: to_left;
animation: to_left 1s ease;
-webkit-animation: to_left 1s ease;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
@keyframes to_left {
to {
-webkit-transform:rotateY(90deg);
transform: rotateY(90deg);
}
}
@-webkit-keyframes to_left {
to {
-webkit-transform:rotateY(90deg);
transform: rotateY(90deg);
}
}
Click also asked to return back to the original interface
.warp.left_back {
animation: left_back 1s ease;
-webkit-animation: left_back 1s ease;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
@keyframes left_back {
from {
-webkit-transform:rotateY(90deg);
transform: rotateY(90deg);
}
to {
-webkit-transform:rotateY(0deg);
transform: rotateY(0deg);
}
}
@-webkit-keyframes left_back {
from {
-webkit-transform:rotateY(90deg);
transform: rotateY(90deg);
}
to {
-webkit-transform:rotateY(0deg);
transform: rotateY(0deg);
}
}
Look at the demo version of the base effect
Obtaining source code (WX code CUBE_002)
