用css3簡單的制作3d半透明立方體圖片展示

以上是實圖展示需要用到的主要元素： 1、perspective：定義 3D 元素距視圖的距 2、transform：允許我們對元素進行旋轉、縮放、移動或傾斜 3、transform-style：規定如何在 3D 空間中呈現被嵌套的元素 4、transition：定義過渡開始、完成的時間、速度和類型 簡述：.cube代表一個正方體，.cube里面的每一個div分別表示正方體的一個面，要想每個面都有圖片，即在每個div里分別加上一個img。正方體的制作很簡單，只需要先讓6個面處于同一位置，然后再繞不同的軸旋轉一定的角度和平移一定距離即可。下面一起看實操：

div部分

css搭建舞臺

css 六個面繞不同的軸旋轉、平移組成正方體

下面是完整代碼，以下代碼中，之所以在.side中加position:absolute是為了讓6個面處于同一位置 然后再從相同的點出發進行不同的旋轉和平移

來自：http://imweb.io/topic/582d9be8f8a1d5546059a2f4