CSS2D轉(zhuǎn)換、3D轉(zhuǎn)換的transform知識點有哪些

本文小編為大家詳細(xì)介紹“CSS2D轉(zhuǎn)換、3D轉(zhuǎn)換的transform知識點有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“CSS2D轉(zhuǎn)換、3D轉(zhuǎn)換的transform知識點有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

　　2D轉(zhuǎn)換

　　定義：2D變換，是在一個平面對元素進(jìn)行的操作。

　　可以對元素進(jìn)行水平或者垂直位移、旋轉(zhuǎn)或者拉伸。

　　確定坐標(biāo)系

　　默認(rèn)狀態(tài)下，x軸是水平的，向右為正。

　　默認(rèn)狀態(tài)下，y軸是垂直的，向下為正。

　　變形屬性：transform

　　屬性值：

　　transform：none;默認(rèn)值

　　transform：translate（）；移動 平移 單位是px

　　transform：rotate（）；旋轉(zhuǎn) 單位是deg deg度數(shù)

　　transform：scale（）；縮放 沒有單位 默認(rèn)值是1

　　transform：skew（）；傾斜 單位是deg

　　transform：matrix（）；矩陣

　　transform：perspective（）；景深 視距 單位是px

　　平移屬性

　　transform ：none； 說明：定義不進(jìn)行轉(zhuǎn)換。

　　transform ：translate(200px)；平移，默認(rèn)是X軸移動，可以單位是%，這個%是自己的，不是父元素的

　　transform ：translate(200px)； 默認(rèn)是按照X軸移動

　　transform ：translateX(200px)； 根據(jù)X軸給定的參數(shù)，從當(dāng)前元素位置移動。

　　transform ：translateY(200px)； 根據(jù)Y軸給定的參數(shù)，從當(dāng)前元素位置移動。

　　transform ：translate(10px,20px)； 定義 2D 平移移動。

　　旋轉(zhuǎn)屬性

　　transform ：rotate(30deg)； 默認(rèn)是按照Z軸旋轉(zhuǎn)。

　　transform ：rotateX(30deg)；根據(jù)X軸給定的參數(shù)，從當(dāng)前元素位置旋轉(zhuǎn)。

　　transform ：rotateY(30deg)； 根據(jù)Y軸給定的參數(shù)，從當(dāng)前元素位置旋轉(zhuǎn)。

　　縮放屬性

　　transform ：scale(0.2)； 默認(rèn)是X和Y同時縮放。

　　ransform ：scaleX(2)； 通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換

　　transform ：scaleY(3)； 通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。

　　transform ：scale(2,5)； 定義 2D 縮放。

　　transform ：scaleX(2) scaleY(3) ；該元素增加或減少的大小，

　　取決于寬度（X軸）和高度（Y軸）的參數(shù)，可以取負(fù)值。

　　只不過取負(fù)值時，會先讓元素進(jìn)行翻轉(zhuǎn)（順時針180deg），

　　然后在進(jìn)行縮放。

　　傾斜屬性

　　transform ：skew(30deg)； 默認(rèn)是X軸傾斜。

　　transform ：skewX(30deg)；通過設(shè)置 X 軸的值來定義傾斜轉(zhuǎn)換

　　transform ：skewY(30deg)；通過設(shè)置 Y 軸的值來定義傾斜轉(zhuǎn)換

　　transform ：skew(30deg,130deg)； 定義 2D 傾斜

　　transform-origin改變元素基點的位置 屬性值可加left right.....

　　主要作用：讓我們在進(jìn)行transform動作之前可以改變元素的基點位置。

　　1.transform-origin(X,Y):用來設(shè)置元素的運動的基點（參照點）。

　　2.transform-origin(X，Y，Z)；其中的Z軸的設(shè)置，只能是數(shù)值。

　　轉(zhuǎn)換基點

　　改變元素基點的位置transform-origin

　　他的主要作用就是讓我們在進(jìn)行transform動作之前可以改變元素的基點位置。

　　A、transform-origin(X,Y):用來設(shè)置元素的運動的基點（參照點）。默認(rèn)點是元素的中心點。其中X和Y的值可以是百分值,em,px，其中X也可以是字符參數(shù)值left,center,right；Y和X一樣除了百分值外還可以設(shè)置字符值top,center,bottom。

　　B、transform-origin(X，Y，Z)；其中的Z軸的設(shè)置，只能是數(shù)值。

讀到這里，這篇“CSS2D轉(zhuǎn)換、3D轉(zhuǎn)換的transform知識點有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。