CSS2D轉換、3D轉換的transform知識點有哪些

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

　　2D轉換

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

　　可以對元素進行水平或者垂直位移、旋轉或者拉伸。

　　確定坐標系

　　默認狀態下，x軸是水平的，向右為正。

　　默認狀態下，y軸是垂直的，向下為正。

　　變形屬性：transform

　　屬性值：

　　transform：none;默認值

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

　　transform：rotate（）；旋轉 單位是deg deg度數

　　transform：scale（）；縮放 沒有單位 默認值是1

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

　　transform：matrix（）；矩陣

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

　　平移屬性

　　transform ：none； 說明：定義不進行轉換。

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

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

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

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

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

　　旋轉屬性

　　transform ：rotate(30deg)； 默認是按照Z軸旋轉。

　　transform ：rotateX(30deg)；根據X軸給定的參數，從當前元素位置旋轉。

　　transform ：rotateY(30deg)； 根據Y軸給定的參數，從當前元素位置旋轉。

　　縮放屬性

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

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

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

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

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

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

　　只不過取負值時，會先讓元素進行翻轉（順時針180deg），

　　然后在進行縮放。

　　傾斜屬性

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

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

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

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

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

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

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

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

　　轉換基點

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

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

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

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

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