CSS3 製作正方體

變形屬性

2d變形屬性

transform:他是css3中的變形屬性:

通過transform(變形) 來實現2d 或者3d 轉換,其中2d 有，縮放 scale(x, y) ，移動 translate(x, y)，旋轉 rotate(deg),傾斜 skew(deg, deg) ,矩陣matrix() ，3d就是在2d基礎上增加了z軸，2d屬性仍可以使用。

123456

形成乙個3d空間：( 讓父元素形成3d，讓其子元素在3d空間進行變化 )

.box

.box div

4、接下來就要為每個面來進行位移和旋轉

.con1

.con2
.con3
.con4
.con5
.con6

5、這裡我加了給元素加backface-visibity:hidden;就可使元素背面不可見

6、最後我們在將開頭提到的「景深」應用下

一般我們 都在父元素中加

.box

如果當你的視線距離物體足夠遠的時候，基本上就不會有近大遠小的感覺

對比下，既可以看到效果

CSS3 製作正方體

變形屬性 2d變形屬性 transform 他是css3中的變形屬性 通過transform 變形 來實現2d 或者3d 轉換,其中2d 有，縮放 scale x,y 移動 translate x,y 旋轉 rotate deg 傾斜 skew deg,deg 矩陣matrix 3d就是在2d基礎上...

純CSS3製作正方體

css3 允許您使用 3d 轉換來對元素進行格式化。rotatex x軸旋轉，圍繞其在乙個給定度數x軸旋轉的元素。div rotatey y軸旋轉，圍繞其在乙個給定度數y軸旋轉的元素。div rotatez z軸旋轉，圍繞其在乙個給定度數z軸旋轉的元素。div 掌握好rotatex,rotatey,...

正方體旋轉demo

乙個正方體有6個面，我們把乙個正方體平鋪開來就是乙個十字的形狀，然後變換每一面的角度把正方體 摺疊 起來！doctype html html head meta charset utf 8 meta name viewport content width device width,initial s...