屬性值可點擊跳轉

transform

屬性值有：

rotate: (旋轉)

　　rotate( )；2D

　　rotateX( );

　　rotateY( );

　　rotateZ( );

　　rotate3D( );

　　括號里面正常都是填角度值（deg）

origin：(起源中心點)

　　origin是為旋轉的設置以哪個點旋轉的

　　origin（0，0）就是以左上角的點為中心旋轉，還可以設置（center，center）就是以圖片的中心點旋轉

　　其實就是X跟Y，可以根據自己需求設置

scale:（伸縮）

　　伸縮的是此元素的變化坐標軸的刻度，不是元素的大小

　　scaleX( );

　　scaleY( );

　　scaleZ( );

　　scale3D( );? ?就是x、y、z三個的和，就是scale3D（x,y,z）

skew:（傾斜）

　　skewX( );

　　skewY( );

translate：(轉變)

　　translateX( );

　　translateY( );

　　translateZ( );

　　tramslate3D( );

景深

　　?perspective:

　　?perspective-origin:?

　　transform-style: preserve-3d

----------------------------------分界線--------------------------------------

然后我們一起來了解一下什么是transform，是怎么使用的

?rotate()

　　調節deg的值就可旋轉圖片，我們注意到它旋轉是以圖片的中心點為旋轉的中心點的

?

? 我們來設置一下origin（0，0），就是以左上角為中心旋轉點旋轉的

我們上面看到的效果都是為2D效果的，接下來我們來了解3D效果

rotateX( );

想要設置3D效果，需要先在旋轉元素的父級上添加這些東西子元素才會以3D的效果展示， 這個后面會詳細講解的

現在來看看X軸的3D效果

rotateY( );

再來Y軸的3D效果

rotateZ( );

再來看看Z軸，Z軸就是相當于立體的面向我們的軸，，，就跟有人拿著劍指著你一樣，劍就是Z軸

注意點當你設置多個旋轉軸的時候，你旋轉第一個軸，元素所參照的坐標軸也會跟著一起旋轉的

看一下動圖

?我們要記得，旋轉的角度一樣，順序不一樣，結果也是不一樣的。

?rotate3D( X， Y ，X ，deg);

　　 首先是先設置一個矢量 / 向量。

　　X，Y，Z繪制的是空間的矢量圖，設置的是比值，而不是角度

　　

我們來看看是怎么使用的：

（平面軸）不涉及Z軸

我們設置的值是1 ：1：0，方向是45度

。

這個軸的方向就是這個方向

（空間軸）

我們再設置1：1：1看看是什么樣的

取B點這條線做3D旋轉

我們可以看到，圖片是圍繞著B點這條軸旋轉的

scale

scaleX(), scaleY(), scaleZ()

可以直接寫成 scale(X,? Y,? Z)

里面是直接填數字，比1大是伸，比1小是縮

注意點：

　　伸縮軸會隨著元素的旋轉而旋轉

先設置scale后設置rotate

先設置rotate后設置scale，隨著旋轉元素的Y軸是會變形的

scaleZ（）

就迎面往前的方向

? skew

?skew（x, y）以X軸Y軸傾斜。是以元素坐標軸傾斜的

?translate

　　 以自身為參考坐標

translateX:

traslateY()

X,Y一起使用

translate還有一個很好用的小技巧

? 就是可以在不知道自己自身寬高的情況下實現居中

?translateZ()

?我們先把圖片旋轉為Y軸80度，方便我們觀看Z軸的變化

以上的translat設置的都是為2D視角的

?

現在我們來了解一下3D

景深

就是我們上面用到的東西，需要在父級設置perspective：***px我們子級才會變成3D空間的屬性

perspective:

眼睛距離元素的位置距離

?perspective-origin:?

就是你的眼睛在哪里看的位置，設置你眼睛所在的位置，正常設置X，Y。還可以設置空間位置，X，Y，Z

?

transform-style: preserve-3d? 這個可以直接設置在子元素身上，可以變成三維空間呈現

?

轉載于:https://www.cnblogs.com/yangpeixian/p/11233697.html

總結

以上是生活随笔為你收集整理的CSS3——transform的全部內容，希望文章能夠幫你解決所遇到的問題。

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