小白筆記：前端小白淺談translate和rotate

開始今天的分享以前，仍是先來每篇一句，但願你們的努力都能獲得將來本身的承認

我永遠不會爲本身怎樣努力過而道歉。 --爆裂鼓手

一. 平面效果

1 translate()

.transform{
    transform: translate(120px, 50%);
}
複製代碼

百分比以自身爲基準 , 當只有一個參數時，默認爲沿x軸移動的距離。

將當前類名爲transform的元素沿x軸方向平移120px，沿y軸方向移動自身高度的50%。

2. rotate()

.rotated {
  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
}
複製代碼

默認以元素寬高的一半爲原點旋轉，括號內參數爲順時針旋轉度數，可爲負數，負數爲逆時針旋轉。

二. 3d效果

1.perspective()

該屬性控制3d元素的透視效果

• 寫3d效果必加語句，不然看不到所寫語句的3d效果

寫法：

.father {
    perspective: 100px;
}
複製代碼

至關於當前眼睛距離該元素的距離，實現近大遠小的3d效果，建議寫大一些些，由於寫的不夠大可能出現元素效果超出當前屏幕的狀況。以下

2. transform-origin()

能夠控制元素在3d變換時所沿變換的X軸、Y軸以及Z軸所在的位置

默認爲中心點 ，以下

.transform{
    transform-origin: 50%,50%，0;
}
複製代碼

• 一個值： 必須是長度，百分比，或 left, center, right, top, bottom關鍵字中的一個。
• 兩個值： 兩個必須是長度，百分比，或left, center, right關鍵字中的一個。
• 三個值： 前兩個值必須是長度，百分比，或left, center, right關鍵字中的一個。 第三個值必須是長度。它始終表明Z軸偏移量。

元素的X軸,Y軸,Z軸會隨着元素的3d變換而改變，因此使用3d語句是有前後順序的！！！

3. transform-style

官方定義：transform--style屬性指定嵌套元素是怎樣在三維空間中呈現。

實際可以實現什麼效果下面三張圖看懂！

下圖是一個原始的3d效果的盒子

下圖是將包裹3d元素的父盒子沿Y軸旋轉60deg角度後

下圖是包裹3d元素的父盒子加上語句

transform-style: preserve-3d;
複製代碼

默認屬性爲：flat

能夠看到3張圖裏，沒有加上transform-style語句時，父盒子旋轉會使3d盒子被壓扁變形，加上以後又實現了3d的效果。這就是該語句控制子元素在空間中以3d或平面效果呈現

4. translate3d(x,y,z)

translateX(100px)函數功能等同於translate3d(100px,0,0)
translate(100px)函數功能等同於translate3d(0,100px,0)
translateZ(100px)函數功能等同於translate3d(0,0,100px)

translate3d的X軸Y軸上的數值的寫法與2d的寫法同樣,z軸必須爲長度，z軸控制元素與視窗的距離，數值越大，在屏幕上的顯示就越大，數值越小顯示在屏幕上的大小也就越小以下圖

偏移前

偏移後

5. rotate3d(x,y,z,a)

• x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；
• y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；
• z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；
• a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，若是其值爲正值，元素順時針旋轉，反之元素逆時針旋轉。

rotateX(a)函數功能等同於rotate3d(1,0,0,a)
rotateY(a)函數功能等同於rotate3d(0,1,0,a)
rotateZ(a)函數功能等同於rotate3d(0,0,1,a)

a指的是一個旋轉角度值。turn是圈，1turn = 360deg； 另外還有弧度rad，2πrad = 1turn = 360deg。如，transform:rotate(2turn); //旋轉兩圈

因爲rotate3d旋轉爲複合，不方便理解，建議新手使用rotateX、rotateY和rotateZ來控制元素的旋轉

三. 結語

以上就是本次分享的所有內容了，但願個人文章能對你有所幫助，若你發現文章之中存在某些錯誤或讓你疑惑的位置，也歡迎你們在評論區指出，讓咱們一塊兒討論，共同進步！