狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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

1、基本概念

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

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

第一個：透視投影

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

與之對應的：正交投影

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

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

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

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

2、瀏覽器的兼容

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

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

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

3、Rotate（旋轉，分為2D旋轉和3D旋轉）

• rotate(angle)，2D旋轉

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

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

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

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

• 元素圍繞著xyz在空間中確定的唯一坐標點和原點之間的連線旋轉指定的角度，這就是rotate3D。

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

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

• scaleX(x) ， 沿 X 軸縮放

• scaleY(y) ， 沿 Y 軸縮放

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

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

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（基準點）

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

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

9、Transform-style（三維空間的展現形式）

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

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