CSS3——transform

屬性值可點擊跳轉

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  這個能夠直接設置在子元素身上，能夠變成三維空間呈現