如何css制作3d旋轉(zhuǎn)立方體效果
3 回答
飲歌長(zhǎng)嘯
TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(gè)贊
<style>
*{
margin:0px;
padding:0px;
}
.box{
width:200px;
margin:200px auto;
perspective:800px;
}
.cube{
position:relative;
width:200px;height:200px;
transform-style:preserve-3d;
transform:rotateY(0deg);
transition:2s;
}
.cube div{
position:absolute;
width:200px;
height:200px;
border:2px solid red;
text-align:center;
line-height:200px;
font-size:30px;
opacity:0.5;
}
.cube div:nth-child(1){
/*先旋轉(zhuǎn)90度再往相應(yīng)的方向移動(dòng)*/
transform:rotateX(90deg) translateZ(102px);
background:#ff33ff;
}
.cube div:nth-child(2){
transform:rotateX(-90deg) translateZ(102px);
background:#99ff99;
}
.cube div:nth-child(3){
transform:translateZ(102px);
background:#ccff33;
}
.cube div:nth-child(4){
transform:translateZ(-102px);
background:#336699;
}
.cube div:nth-child(5){
transform:rotateY(90deg) translateZ(102px);
background:#990033;
}
.cube div:nth-child(6){
transform:rotateY(-90deg) translateZ(102px);
background:#666633;
}
.cube:hover{
transform:rotateY(360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="cube">
<div>上</div>
<div>下</div>
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
</div>
</div>
</body>
資源：http://www.xuniyicheng.com/article/6.jsp
- 3 回答
- 0 關(guān)注
- 543 瀏覽
添加回答
舉報(bào)
0/150
提交
取消