單詞

前：front 前端：front-end
后：back
左：left
右：rigth
頂：top
底：bottom

如何讓一個div水平垂直居中

方法一：使用定位 + translate（）| calc（）
方法二：彈性盒模型
方法三：外邊距自動獲取
方法四：網(wǎng)格

translate（）

定義移動變換
語法

translate（）
translate3d（）
translateX（）
translateY（）
translatez（）

屬性值

• 單位： 數(shù)值是任意長度值：px % em rem vh vw
  • translateZ(50%)/無效 因為div沒有厚度/
• 數(shù)量： 屬性值數(shù)量由函數(shù)確定：1 - 3個
• 數(shù)量：多個屬性值，使用逗號分隔
• 方向：
  • X:正值向右 負(fù)值向左
  • Y:正值向下 負(fù)值向上
  • Z：正值向前 負(fù)值向后
• 等價：translate（200px）等價于translateX（200px）

scale()函數(shù)

定義：用于對元素進(jìn)行縮放變換。
用法：

scale（）
scale3d（）
scaleX（）
scaleY（）
scaleZ（）

參數(shù)值

• 數(shù)量由函數(shù)決定：1 - 3個屬性值
• 類型：沒有單位的數(shù)值。 數(shù)值表示縮放系數(shù)。
• 范圍：[-1,1]和[1,正無窮]
  • 1：無效果
  • 0.5表示縮小一半
  • 0.5等于0.5
  • 2表示放大2倍

rotate()

定義：用于對元素進(jìn)行旋轉(zhuǎn)變換。
語法

rotate（）
rotate3d（）
rotateX（）
rotateY（）
rotateZ（）

屬性值

• 等價：rotate（30deg）效果rotateX（30deg）e'd'z
• 30deg：屬性值是角度值。deg表示角度單位。
• 數(shù)量：由函數(shù)決定。1 - 4

skew（）

定義：用于對元素進(jìn)行斜切變換
語法

skew()
skewX()
skewY()

參數(shù)：參數(shù)是角度值。deg表示角度單位

• 參數(shù)數(shù)量由

transform-origin

定義：用于設(shè)置元素的變換中心點。
語法

transform-origin： X Y Z;
transform-origin： X Y ;
transform-origin： X ;

屬性值:transform-origin:center center;
X：任意長度值 | 關(guān)鍵詞。表示X軸的偏移。
y：表示長度值 | 關(guān)鍵詞。表示y軸的偏移
z：表示長度值 | 關(guān)鍵詞。表示z軸的偏移
兩個值

• 如果只設(shè)置一個值，那么第二只默認(rèn)center

transform-style

定義：用于設(shè)置父元素是2d還是3d模式。
語法

transform-style：flat;
transform-style:prevverse-3d;

屬性值

• Flat：開啟2d平面空間
• Preserve-3d：開啟3d立體空間

perspective

定義：是否開啟透視 | 是否設(shè)置景深。 | 解釋 perspectiv指定的是z軸原點到屏幕的距離。
語法

 perspectve:none
perspective：長度值

屬性值：

• none：不設(shè)置景深
• 長度值：任何長度都可以用來設(shè)置景深
  • 大景深 小變換：在相同的情況下，perspective
  • 小景深 大變換：在相同

5perspective-origin

定義：指定了觀察者的位置。（設(shè)置消失點的位置）用作perspective屬性的消失點。
語法

屬性值

• 數(shù)量
  x - position：表示水平位置
  y - position：表示垂直位置
• 屬性值類型
  • 長度值：px % em rem vh vw

第一步：基礎(chǔ)設(shè)置
第二步：處理地面 ，立方體，球三者的關(guān)系和大小
第三步：創(chuàng)建立方體
第四步：添加動畫效果

.scene{
animation:動畫名 2sx
}