屬性值可點擊跳轉(zhuǎn)

transform

屬性值有：

rotate: (旋轉(zhuǎn))

　　rotate( )；2D

　　rotateX( );

　　rotateY( );

　　rotateZ( );

　　rotate3D( );

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

origin：(起源中心點)

　　origin是為旋轉(zhuǎn)的設(shè)置以哪個點旋轉(zhuǎn)的

　　origin（0，0）就是以左上角的點為中心旋轉(zhuǎn)，還可以設(shè)置（center，center）就是以圖片的中心點旋轉(zhuǎn)

　　其實就是X跟Y，可以根據(jù)自己需求設(shè)置

scale:（伸縮）

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

　　scaleX( );

　　scaleY( );

　　scaleZ( );

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

skew:（傾斜）

　　skewX( );

　　skewY( );

translate：(轉(zhuǎn)變)

　　translateX( );

　　translateY( );

　　translateZ( );

　　tramslate3D( );

景深

　　?perspective:

　　?perspective-origin:?

　　transform-style: preserve-3d

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

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

?rotate()

　　調(diào)節(jié)deg的值就可旋轉(zhuǎn)圖片，我們注意到它旋轉(zhuǎn)是以圖片的中心點為旋轉(zhuǎn)的中心點的

?

? 我們來設(shè)置一下origin（0，0），就是以左上角為中心旋轉(zhuǎn)點旋轉(zhuǎn)的

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

rotateX( );

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

現(xiàn)在來看看X軸的3D效果

rotateY( );

再來Y軸的3D效果

rotateZ( );

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

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

看一下動圖

?我們要記得，旋轉(zhuǎn)的角度一樣，順序不一樣，結(jié)果也是不一樣的。

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

　　 首先是先設(shè)置一個矢量 / 向量。

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

　　

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

（平面軸）不涉及Z軸

我們設(shè)置的值是1 ：1：0，方向是45度

。

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

（空間軸）

我們再設(shè)置1：1：1看看是什么樣的

取B點這條線做3D旋轉(zhuǎn)

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

scale

scaleX(), scaleY(), scaleZ()

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

里面是直接填數(shù)字，比1大是伸，比1小是縮

注意點：

　　伸縮軸會隨著元素的旋轉(zhuǎn)而旋轉(zhuǎn)

先設(shè)置scale后設(shè)置rotate

先設(shè)置rotate后設(shè)置scale，隨著旋轉(zhuǎn)元素的Y軸是會變形的

scaleZ（）

就迎面往前的方向

? skew

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

?translate

　　 以自身為參考坐標

translateX:

traslateY()

X,Y一起使用

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

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

?translateZ()

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

以上的translat設(shè)置的都是為2D視角的

?

現(xiàn)在我們來了解一下3D

景深

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

perspective:

眼睛距離元素的位置距離

?perspective-origin:?

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

?

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/yangpeixian/p/11233697.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。