如何用css3简单的制作3d半透明立方体图片展示
以上是实图展示
需要用到的主要元素：
1、perspective：定义 3D 元素距视图的距
2、transform：允许我们对元素进行旋转、缩放、移动或倾斜
3、transform-style：规定如何在 3D 空间中呈现被嵌套的元素
4、transition：定义过渡开始、完成的时间、速度和类型
简述：.cube代表一个正方体，.cube里面的每一个div分别表示正方体的一个面，要想每个面都有图片，即在每个div里分别加上一个img。正方体的制作很简单，只需要先让6个面处于同一位置，然后再绕不同的轴旋转一定的角度和平移一定距离即可。下面一起看实操：
//div部分
<div id="stage"><!-stage为效果的展示舞台->
<div class="cube">
<div class="side front"><img src="6.gif" alt="" /></div>
<div class="side back"><img src="2.jpg" alt="" /></div>
<div class="side left"><img src="3.jpg" alt="" /></div>
<div class="side right"><img src="4.jpg" alt="" /></div>
<div class="side top"><img src="5.jpg" alt="" /></div>
<div class="side bottom"><img src="1.jpg" alt="" /></div>
</div>
</div>
//css部分
html{
font-size:62.5%;
}
img{
width:300px;
height:300px;
}
#stage{
margin-top:200px;
margin-left:auto;
margin-right:auto;
width:300px;
height:300px;
perspective:1200px;
font-size:5em;
font-weight:bold;
color:#cc00ff;
}
.cube{
position:relative;
transform:rotateX(-45deg) rotateY(45deg);
transform-style:preserve-3d;
transition: all .6s;
}
.side{
color:blue;
text-align:center;
width:300px;
height:300px;
line-height:300px;
position:absolute;/*令正方体的6个面处于同一个位置，为后面的div进行旋转做基础*/
background:#cc66ff;
opacity:0.5;/*设置图片的透明度*/
border:1px solid rgba(117,4,24,0.5);
}
/*以下是6个面按照x、y、z轴进行的旋转和平移*/
.front{
transform:translateZ(150px);
}
.back{
transform:rotateY(180deg) translateZ(150px);
}
.left{
transform:rotateY(-90deg) translateZ(150px);
}
.right{
transform:rotateY(90deg) translateZ(150px);
}
.top{
transform:rotateX(90deg) translateZ(150px);
}
.bottom{
transform:rotatex(-90deg) translateZ(150px);
}
/*以下是定义鼠标移上正方体是是否进行过渡变换*/
#stage:hover .cube{
transform:rotateX(-45deg) rotateY(225deg);
transition:transform .6s;
}