：css中的transform屬性詳解有哪些屬性值（前端transform屬性詳解）

1、基本概念

基本概念：transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換；該屬性允許我們對元素進(jìn)行旋轉(zhuǎn)、縮放、移動或傾斜。

這兩點(diǎn)是Transform的概念和應(yīng)用場景，重點(diǎn)在于2D和3D的轉(zhuǎn)換，那么呢？2D和3D的轉(zhuǎn)換是有一定的數(shù)學(xué)基礎(chǔ)的，為什么這么說呢？我們需要了解兩個概念

第一個：透視投影

從某一點(diǎn)發(fā)射出去的光線，是互不平行的，然后就會有一個近大遠(yuǎn)小的效果。比如：家里的燈泡，我們把一個東西離得燈泡越近，那么它的影子就越大，離得越遠(yuǎn)，影子就越小。

與之對應(yīng)的：正交投影

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

CSS的坐標(biāo)系統(tǒng)：它的坐標(biāo)系是一個左手坐標(biāo)系，綠色的是x軸的方向也就是屏幕的方向，向右正方向；紅色的是y軸，向下是正方向；藍(lán)色是z軸，屏幕向外是正方向。（如下圖所示）

CSS變換都是基于左手坐標(biāo)系和透視投影。

常用屬性主要有：Transform-origin（基準(zhǔn)點(diǎn)），基于哪一個點(diǎn)來做變換，Transform-style（元素呈現(xiàn)方式2D還是3D），Rotate（旋轉(zhuǎn)-度數(shù)），Scale（縮放-大?。?，Skew（傾斜-左右），Translate（移動-x/y軸），Perspective（透視）。

2、瀏覽器的兼容

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

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

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

3、Rotate（旋轉(zhuǎn)，分為2D旋轉(zhuǎn)和3D旋轉(zhuǎn)）

• rotate(angle)，2D旋轉(zhuǎn)

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

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

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

• rotate3d(x, y, z, angle) ， 3D旋轉(zhuǎn)；接收四個參數(shù)，x y z 介于0-1之間，確定三維空間唯一坐標(biāo)點(diǎn)，angle圍繞原點(diǎn)與x y z 坐標(biāo)點(diǎn)連線的旋轉(zhuǎn)角度。

• 元素圍繞著xyz在空間中確定的唯一坐標(biāo)點(diǎn)和原點(diǎn)之間的連線旋轉(zhuǎn)指定的角度，這就是rotate3D。

4、Scale（縮放，同樣分為2D縮放和3D縮放）

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

• scaleX(x) ， 沿 X 軸縮放

• scaleY(y) ， 沿 Y 軸縮放

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

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

5、Skew（傾斜）

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

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

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

6、Translate（移動）

• translateX(x) ， 沿 X 軸位移

• translateY(y) ， 沿 Y 軸位移

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

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

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

7、Perspective，定義的是視覺和元素在3D空間Z平面之間的距離

8、Transform-origin（基準(zhǔn)點(diǎn)）

在前面的例子里，旋轉(zhuǎn)和傾斜都是基于中心位置，也就是基準(zhǔn)點(diǎn)的默認(rèn)值：50% 50% 0；Transform-origin接收三個參數(shù)，x-axis y-axis z-axis；

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

9、Transform-style（三維空間的展現(xiàn)形式）

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

本文主要分享了Transform的基本概念，簡要介紹了CSS3坐標(biāo)系統(tǒng)與透視原理, 重點(diǎn)介紹了Transform常用的Rotate(旋轉(zhuǎn))、Scale(縮放)、Skew(傾斜)、Translate(移動)、Perspective(透視)屬性。