基本概念：transform 屬性向元素應用 2D 或 3D 轉換；該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

這兩點是Transform的概念和應用場景，重點在于2D和3D的轉換，那麼呢？2D和3D的轉換是有一定的數學基礎的，為什麼這麼說呢？我們需要了解兩個概念

第一個：透視投影

從某一點發射出去的光線，是互不平行的，然後就會有一個近大遠小的效果。比如：家裡的燈泡，我們把一個東西離得燈泡越近，那麼它的影子就越大，離得越遠，影子就越小。

與之對應的：正交投影

正交投影的投影線垂直于投影平面，裡面的光線是互相平行的；比如生活中的太陽發出的光都是平行光。

CSS的坐标系統：它的坐标系是一個左手坐标系，綠色的是x軸的方向也就是屏幕的方向，向右正方向；紅色的是y軸，向下是正方向；藍色是z軸，屏幕向外是正方向。（如下圖所示）

CSS變換都是基于左手坐标系和透視投影。

常用屬性主要有：Transform-origin（基準點），基于哪一個點來做變換，Transform-style（元素呈現方式2D還是3D），Rotate（旋轉-度數），Scale（縮放-大小），skew（傾斜-左右），Translate（移動-x/y軸），Perspective（透視）。

• 完全支持Transform第一個浏覽器版本

• 完全支持Transform-origin第一個浏覽器版本

• 完全支持Transform-style第一個浏覽器版本

• rotate(angle)，2D旋轉

transform: rotate(45deg);

• rotateX(angle)，沿X軸3D旋轉

transform: rotate(45deg);

• rotateY(angle) ， 沿 Y 軸3D旋轉

transform: rotate(45deg);

• rotateZ(angle) ， 沿 Z 軸3D旋轉

transform: rotate(45deg);

• rotate3d(x, y, z, angle) ， 3D旋轉；接收四個參數，x y z 介于0-1之間，确定三維空間唯一坐标點，angle圍繞原點與x y z 坐标點連線的旋轉角度。
• 元素圍繞着xyz在空間中确定的唯一坐标點和原點之間的連線旋轉指定的角度，這就是rotate3D。

transform: rotate3d(1,1,1,45deg);

• scale(x[, y]) ，2D 縮放

transform: scale(2);

• scaleX(x) ， 沿 X 軸縮放

transform: scaleX(2);

• scaleY(y) ， 沿 Y 軸縮放

transform: scaleY(2);

• scaleZ(z) ， 沿 Z 軸縮放 - 單獨使用時沒有任何效果

transform: scaleZ(2);

• scale3d(x, y, z) ， 定義每個方向上的縮放 ， Z方向單獨使用時沒有任何效果

transform: scale(2,2,2);

• skewX(angle) - 沿 X 軸的 2D 傾斜

transform: skewX(45deg);

• skewY(angle) - 沿 Y 軸的 2D 傾斜

transform: skewY(45deg);

• skew(angle-x, angle-y) - 沿 X Y 軸的 2D 傾斜

transform: skewY(45deg, 45deg);

• translateX(x) ， 沿 X 軸位移

transform: translateX(20px);

• translateY(y) ， 沿 Y 軸位移

transform: translateY(20px);

• translateZ(z) ， 沿 Z 軸位移，需要配合perspective屬性一起使用

transform: translateZ(20px);

• translate(x, y) ， 沿 X Y 軸位移

transform: translate(20px,20px);

• translate3d(x, y, z) ， 沿 X Y Z 軸位移

transform: translate(20px, 20px, 20px);

transform: perspective(200px);

在前面的例子裡，旋轉和傾斜都是基于中心位置，也就是基準點的默認值：50% 50% 0；Transform-origin接收三個參數，x-axis y-axis z-axis；

在x的方向上可以指定：left、center、right、length和%；在y軸的方向上可以指定：top、center、bottom、length和%；在y軸的方向上隻可以指定：length。

transform-origin: x-axis y-axis z-axis;

主要有兩個值：float - 2D形式和preserve-3d - 3D形式。

本篇文章主要分享了Transform的基本概念，簡要介紹了CSS3坐标系統與透視原理, 重點介紹了Transform常用的Rotate(旋轉)、Scale(縮放)、Skew(傾斜)、Translate(移動)、Perspective(透視)屬性。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!