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

本文作者：IMWeb lxy 原文出处：IMWeb社区 未经同意，禁止转载

以上是实图展示需要用到的主要元素： 1、perspective：定义 3D 元素距视图的距 2、transform：允许我们对元素进行旋转、缩放、移动或倾斜 3、transform-style：规定如何在 3D 空间中呈现被嵌套的元素 4、transition：定义过渡开始、完成的时间、速度和类型 简述：.cube代表一个正方体，.cube里面的每一个div分别表示正方体的一个面，要想每个面都有图片，即在每个div里分别加上一个img。正方体的制作很简单，只需要先让6个面处于同一位置，然后再绕不同的轴旋转一定的角度和平移一定距离即可。下面一起看实操：

div部分

css搭建舞台

css 六个面绕不同的轴旋转、平移组成正方体

下面是完整代码，以下代码中，之所以在.side中加position:absolute是为了让6个面处于同一位置 然后再从相同的点出发进行不同的旋转和平移