用css3简单的制作3d半透明立方体图片展示

   <p style="text-align:center"><img src="https://simg.open-open.com/show/09f3f32b1528acfab3d7dba4f4cdd1ca.png"></p>    <p>以上是实图展示需要用到的主要元素： 1、perspective：定义 3D 元素距视图的距 2、transform：允许我们对元素进行旋转、缩放、移动或倾斜 3、transform-style：规定如何在 3D 空间中呈现被嵌套的元素 4、transition：定义过渡开始、完成的时间、速度和类型 简述：.cube代表一个正方体，.cube里面的每一个div分别表示正方体的一个面，要想每个面都有图片，即在每个div里分别加上一个img。正方体的制作很简单，只需要先让6个面处于同一位置，然后再绕不同的轴旋转一定的角度和平移一定距离即可。下面一起看实操：</p>    <p>div部分</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9f40fcef09373ef67f1fe1816b1a0005.png"></p>    <p>css搭建舞台</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/13b1217f218c553f1ad47b95d0dbddaa.png"></p>    <p>css 六个面绕不同的轴旋转、平移组成正方体</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/85d3423b881acc03b579c900f31d399b.png"></p>    <p>下面是完整代码，以下代码中，之所以在.side中加position:absolute是为了让6个面处于同一位置 然后再从相同的点出发进行不同的旋转和平移</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8a51104ab91eba032437ae10f45669c5.png"> <img src="https://simg.open-open.com/show/70dd92bed0edbc055d3defec455879fb.png"> <img src="https://simg.open-open.com/show/fbf8d5512d21ae49e0563cd6d18aa8f8.png"></p>    <p> </p>    <p>来自：http://imweb.io/topic/582d9be8f8a1d5546059a2f4</p>    <p> </p>