大家都来谈谈3D
我会的第一个3D程序,是通过网上的一个实例修改的实例一：旋转的正方体
<style type="text/css">
.stage{
perspective: 800px;
}
.container{
width: 150px;
height:150px;
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
height:200px;
transition:10s;
}
.side{
position: absolute;
width: 150px;
height: 150px;
text-align: center;
line-height: 150px;
}
.front{
transform:translateZ(75px);
background:red;
}
.back{
transform:rotateY(180deg)translateZ(75px) ;
background:orange;
}
.left{
transform:rotateY(-90deg)translateZ(75px) ;
background:pink;
}
.right{
transform: rotateY(90deg)translateZ(75px) ;
background: gold;
}
.top{
transform:rotateX(90deg)translateZ(75px) ;
background:green;
}
.bottom{
transform:rotateX(-90deg)translateZ(75px);
background:blue;
}
.container:hover{
transform: rotateY(360deg);
}
</style>
<div class="stage">
<div class="container">
<div class="side front">前</div>
<div class="side back">后</div>
<div class="side left">左</div>
<div class="side right">右</div>
<div class="side top">上</div>
<div class="side bottom">下</div>
</div>
</div>
