1.3D坐標系

3D坐標可以用左手來模擬，其中大拇指方向默認是X軸正方向，食指方向是Y軸正方向，中指方向是Z軸正方向。注意：當設置transform：rotateX(90deg)時，相當于將X軸轉動90°，此時Z軸正方向向上，所以設置transform：translateZ(150px)時，就產生了3D立方體的上面，具體原理可以通過chrome瀏覽器審查元素來調試。

2.3D視圖

transform-style：flat(默認，二維效果) / preserve-3d(三維效果)。設置一個元素的transform-style:preserve-3d；只影響這個元素的子元素(如果孫元素也有3d效果，那么還必須給子元素設置preserve-3d)。這樣所有子元素都可以相對與父元素的平面進行3d變形操作。和二維變形一樣，三維變形可以使用transform屬性來設置。可以通過制定的函數或者通過三維矩陣來對元素變型。列舉幾個函數：

translate3d(x,y,z) 使元素在這三個緯度中移動,也可以分開寫，如：translateX(length),translateY(length),?translateZ(length)。注意z軸的值只能為px;

scale3d(number,number,number) 使元素在這三個緯度中縮放，也可分開寫，如：scaleX(),scaleY(),scaleY()。

rotateX(angle) 是元素依照x軸旋轉；

rotateY(angle) 是元素依照y軸旋轉；

rotateZ(angle) 是元素依照z軸旋轉。

3.perspective和transform-style的設置問題

(1)當設置perspective(length);不設置transform-style:preserve-3d；當元素靜止時，會有立體的效果：

(2)當設置perspective(length);不設置transform-style:preserve-3d；當元素旋轉時的效果：

(3)當設置transform-style:preserve-3d；不設置perspective(length);當元素靜止時，不會有立體的效果：

(4)當設置perspective(length);不設置transform-style:preserve-3d；當元素旋轉時的效果：

注意：(1)如果一個元素以x軸或y軸旋轉90度以上的話，那么它的背面將面向用戶。背面的元素始終是透明的，所以用戶通過后面看到正面的反向形態，就像是從在玻璃門后面看對外張貼的標志。為了防止顯示鏡像的前面。可以將backface-visibility設置為hidden;如果backface-visibility:hidden;那么這個元素就不會在背面可見了。這么做的一個原因就是，想一個元素有兩個面，就像一個撲克牌。比如：創建一張撲克牌，正面和背面一定不一樣，這兩個面的位置是背靠背的。這兩個元素一起轉動，正面逐步向后反轉隱藏，同時背面向前反轉并出現。如果背面的元素是可見的，旋轉時它將掩蓋它底下的元素，而不是露出它下面的元素。

(2)如果父元素設置overflow：hidden；那么子元素就無法跳出父元素的平面，也就不能出現3D效果。就如同，transform-style：flat；

3.自己做得3D立方體

Document

}.front, .back, .left, .right, .top, .bottom{width:100%;height:100%;opacity:0.5;position:absolute;left:0;top:0;

}.front{background-color:pink;transform:translateZ(100px);

}.back{background-color:orange;transform:translateZ(-100px);

}.left{background-color:blue;transform:rotateY(-90deg) translateZ(100px);

}.right{background-color:red;transform:rotateY(90deg) translateZ(100px);

}.top{background-color:green;transform:rotateX(-90deg) translateZ(-100px);

}.bottom{background-color:yellowgreen;transform:rotateX(-90deg) translateZ(100px);

}

front

總結

以上是生活随笔為你收集整理的css33d图片轮播_1.Web前端之CSS3中3D立方体以及3D轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。