如何css制作3d旋转立方体效果
3 回答
饮歌长啸
TA贡献1951条经验 获得超3个赞
<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){
/*先旋转90度再往相应的方向移动*/
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 关注
- 522 浏览
添加回答
举报
0/150
提交
取消