其效果圖如下：
https://zhijs.github.io/web/cube
css3實現自由擺動的立方體
實現立方體，主要用到的css3動畫屬性有
translateX(a )/ translateY(a )/translateZ(a)
分別是往x,y,z方向移動a像素的距離
rotateX(deg) / rotateY(deg)/ rotateZ(deg)
分別表示沿x,y,z軸旋轉，正值爲順時針方向，負值爲逆時針方向
animation屬性
指定動畫
如何定義動畫
動畫通過
@keyframes 動畫名稱 { 動畫過程 } 來定義
實現立方體第一步
構造立方體
首先將六個面置於重合的位置 eg:如下圖所示
接下來分別構造各個面，例如頂面可以看成是由正面沿x軸順時針方向旋轉90度，然後沿y軸負方向平移高度的一半，再沿z軸負方向平移高度的一半，從而得到頂面
代碼爲
.face2{
background:green;
transform:translateY(-50%) translateZ(-90px) rotateX(90deg) rotateY(0) ;
} 結果如下圖所示
同理可以構造出其他的各個面。
將包含這些面的容器應用動畫，使其沿x,y,z軸旋轉。
代碼如下
index.html
<!DOCTYPE html>
<html>
<head>
<title>css3 立方體</title>
<meta charset='utf-8'/>
<link rel="stylesheet" type="text/css" href="style/cube.css"/>
</head>
<body>
<div class="contain">
<div class="cube">
<figure class='face1'>1</figure>
<figure class='face2'>2</figure>
<figure class='face3'>3</figure>
<figure class='face4'>4</figure>
<figure class='face5'>5</figure>
<figure class='face6'>6</figure>
</div>
</div>
</body>
</html>其主要css代碼如下
*{
margin:0;
padding: 0;
}
.contain{
width: 100%;
height: 100%;
position: relative;
background: #230;
}
.cube{
width:120px;
height: 120px;
margin-top:100px;
position: absolute;
top:50%;
left: 50%;
transform-style:preserve-3d;
transform:translate(-50%,50%);
animation:rote 4s infinite linear;
}
.cube figure{
width:180px;
height: 180px;
position: absolute;
text-align:center;
border:2px solid #ff0;
line-height: 180px;/*行高設置成和容器一樣高，實現文字的上下居中*/
font-size: 120px;
font-weight: bold; /*字體加粗*/
}
.face1{
background:red;
transform:translateZ(0) rotateX(0) rotateY(0);
}
.face2{
background:green;
transform:translateY(-50%) translateZ(-90px) rotateX(90deg) rotateY(0) ;
}
.face3{
background:yellow;
transform:translateY(0) translateZ(-90px) translateX(50%) rotateX(0) rotateY(90deg) ;
}
.face4{
background:blue;
transform:translateY(50%) translateZ(-90px) translateX(0) rotateX(90deg) rotateY(0) ;
}
.face5{
background:gray;
transform:translateY(0) translateZ(-90px) translateX(-50%) rotateX(0) rotateY(90deg) ;
}
.face6{
background:purple;
transform:translateY(0) translateZ(-180px) translateX(0) rotateX(0) rotateY(0) ;
}
@keyframes rote
{
from{
transform:translateZ(-100px) rotateX(0) rotateY(0) rotateZ(0);
}
to{
transform:translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}