キューブ・メニュー
コードはまた私を許しや批判を願っ目の場所に快適な表示されませんので、興味のCSSの効果についてEDITORIAL Iの非専門家のフロントエンドは、達成するために。（公共の利益の懸念がリソースへのアクセスマイクロチャネルの数を追加してください - 記事の最後にマップ）
HTML形式の初期化フレーム
<!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>
六面を作成するために、上記のコードは、立方体の6つの面として、それぞれ、でした。
16小ブロックに分割され、各側が採用されている16-クリックメニュー面を収容することができます。
デバッグには、次のような効果の影響を示す見ることができます。
回転運動をクリックして追加します。
- 原則と矛盾顔アクションへの道の残りの部分のように回転の場合があり、左をクリックして
回転のすべての現在の角度位置は回転の目的は、90度の左側にあるオプションをクリックすることで、0であるので、to_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);
}
}
また、元のインターフェイスに戻りように求め]をクリックします
.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);
}
}
ベース効果のデモ版を見てください
取得ソースコード（WXコードCUBE_002）
