1芯丧、基本概念
基本概念：transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換稍计；該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)席赂、縮放援雇、移動(dòng)或傾斜矛渴。
這兩點(diǎn)是Transform的概念和應(yīng)用場(chǎng)景，重點(diǎn)在于2D和3D的轉(zhuǎn)換惫搏，那么呢具温？2D和3D的轉(zhuǎn)換是有一定的數(shù)學(xué)基礎(chǔ)的，為什么這么說(shuō)呢筐赔？我們需要了解兩個(gè)概念
第一個(gè)：透視投影
從某一點(diǎn)發(fā)射出去的光線铣猩，是互不平行的，然后就會(huì)有一個(gè)近大遠(yuǎn)小的效果茴丰。比如：家里的燈泡达皿，我們把一個(gè)東西離得燈泡越近，那么它的影子就越大贿肩，離得越遠(yuǎn)峦椰，影子就越小。
與之對(duì)應(yīng)的：正交投影
正交投影的投影線垂直于投影平面汰规，里面的光線是互相平行的汤功；比如生活中的太陽(yáng)發(fā)出的光都是平行光。
CSS的坐標(biāo)系統(tǒng)：它的坐標(biāo)系是一個(gè)左手坐標(biāo)系溜哮，綠色的是x軸的方向也就是屏幕的方向滔金，向右正方向；紅色的是y軸茂嗓，向下是正方向餐茵；藍(lán)色是z軸，屏幕向外是正方向述吸。（如下圖所示）
CSS變換都是基于左手坐標(biāo)系和透視投影忿族。
常用屬性主要有：Transform-origin（基準(zhǔn)點(diǎn)），基于哪一個(gè)點(diǎn)來(lái)做變換，Transform-style（元素呈現(xiàn)方式2D還是3D）肠阱，Rotate（旋轉(zhuǎn)-度數(shù)），Scale（縮放-大衅佣痢）屹徘，Skew（傾斜-左右），Translate（移動(dòng)-x/y軸）衅金，Perspective（透視）噪伊。
2、瀏覽器的兼容
- 完全支持Transform第一個(gè)瀏覽器版本
- 完全支持Transform-origin第一個(gè)瀏覽器版本
-
完全支持Transform-style第一個(gè)瀏覽器版本
bowser3.png
3氮唯、Rotate（旋轉(zhuǎn)鉴吹，分為2D旋轉(zhuǎn)和3D旋轉(zhuǎn)）
-
rotate(angle)，2D旋轉(zhuǎn)
transform: rotate(45deg); -
rotateX(angle)惩琉，沿X軸3D旋轉(zhuǎn)
transform: rotate(45deg); -
rotateY(angle)豆励， 沿 Y 軸3D旋轉(zhuǎn)transform: rotate(45deg); -
rotateZ(angle)， 沿 Z 軸3D旋轉(zhuǎn)transform: rotate(45deg); -
rotate3d(x, y, z, angle)瞒渠， 3D旋轉(zhuǎn)良蒸；接收四個(gè)參數(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串纺。
transform: rotate3d(1,1,1,45deg);
4、Scale（縮放椰棘，同樣分為2D縮放和3D縮放）
-
scale(x[, y])纺棺，2D 縮放transform: scale(2); -
scaleX(x)， 沿 X 軸縮放transform: scaleX(2); -
scaleY(y)晰搀， 沿 Y 軸縮放transform: scaleY(2); -
scaleZ(z)五辽， 沿 Z 軸縮放 - 單獨(dú)使用時(shí)沒(méi)有任何效果transform: scaleZ(2); -
scale3d(x, y, z)， 定義每個(gè)方向上的縮放 外恕， Z方向單獨(dú)使用時(shí)沒(méi)有任何效果transform: scale(2,2,2);
5杆逗、Skew（傾斜）
-
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);
6、Translate（移動(dòng)）
-
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);
7、Perspective癣疟，定義的是視覺(jué)和元素在3D空間Z平面之間的距離
transform: perspective(200px);
8挣柬、Transform-origin（基準(zhǔn)點(diǎn)）
在前面的例子里，旋轉(zhuǎn)和傾斜都是基于中心位置睛挚，也就是基準(zhǔn)點(diǎn)的默認(rèn)值：50% 50% 0邪蛔；Transform-origin接收三個(gè)參數(shù)，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;
9著蛙、Transform-style（三維空間的展現(xiàn)形式）
主要有兩個(gè)值：float - 2D形式和preserve-3d - 3D形式。
本篇文章主要分享了Transform的基本概念耳贬，簡(jiǎn)要介紹了CSS3坐標(biāo)系統(tǒng)與透視原理, 重點(diǎn)介紹了Transform常用的Rotate(旋轉(zhuǎn))踏堡、Scale(縮放)、Skew(傾斜)咒劲、Translate(移動(dòng))顷蟆、Perspective(透視)屬性。
