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

2019 年 12 月 5 日
筆記

本文作者：IMWeb lxy 原文出處：IMWeb社區 未經同意，禁止轉載

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

div部分