Transform(CSS動態屬性的開始)

一、基本概念

基本概念: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

二、瀏覽器的兼容

  • 徹底支持Transform第一個瀏覽器版本

圖片描述

  • 徹底支持Transform-origin第一個瀏覽器版本

圖片描述

  • 徹底支持Transform-style第一個瀏覽器版本

圖片描述

三、Rotate(旋轉,分爲2D旋轉和3D旋轉)

  • 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(縮放,一樣分爲2D縮放和3D縮放)

  • 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);

五、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);

六、Translate(移動)

  • 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);

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

transform: perspective(200px);

八、Transform-origin(基準點)

在前面的例子裏,旋轉和傾斜都是基於中心位置,也就是基準點的默認值: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;

九、Transform-style(三維空間的展示形式)

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

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

相關文章
相關標籤/搜索