基本概念:transform 屬性向元素應用 2D 或 3D 轉換;該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜。 瀏覽器
這兩點是Transform的概念和應用場景,重點在於2D和3D的轉換,那麼呢?2D和3D的轉換是有必定的數學基礎的,爲何這麼說呢?咱們須要瞭解兩個概念spa
第一個:透視投影3d
從某一點發射出去的光線,是互不平行的,而後就會有一個近大遠小的效果。好比:家裏的燈泡,咱們把一個東西離得燈泡越近,那麼它的影子就越大,離得越遠,影子就越小。code
與之對應的:正交投影orm
正交投影的投影線垂直於投影平面,裏面的光線是互相平行的;好比生活中的太陽發出的光都是平行光。blog
CSS的座標系統:它的座標系是一個左手座標系,綠色的是x軸的方向也就是屏幕的方向,向右正方向;紅色的是y軸,向下是正方向;藍色是z軸,屏幕向外是正方向。(以下圖所示)圖片
CSS變換都是基於左手座標系和透視投影。數學
經常使用屬性主要有:Transform-origin(基準點),基於哪個點來作變換,Transform-style(元素呈現方式2D仍是3D),Rotate(旋轉-度數),Scale(縮放-大小),Skew(傾斜-左右),Translate(移動-x/y軸),Perspective(透視)。it
rotate(angle),2D旋轉form
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(透視)屬性。