單詞
前：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:正值向右 負值向左
- Y:正值向下 負值向上
- Z：正值向前 負值向后
- 等價：translate（200px）等價于translateX（200px）
scale()函數(shù)
定義：用于對元素進行縮放變換浅碾。
用法：
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()
定義：用于對元素進行旋轉變換给梅。
語法
rotate（）
rotate3d（）
rotateX（）
rotateY（）
rotateZ（）
屬性值
- 等價：rotate（30deg）效果rotateX（30deg）e'd'z
- 30deg：屬性值是角度值缤言。deg表示角度單位欺抗。
- 數(shù)量：由函數(shù)決定岩喷。1 - 4
skew（）
定義：用于對元素進行斜切變換
語法
skew()
skewX()
skewY()
參數(shù)：參數(shù)是角度值恕沫。deg表示角度單位
- 參數(shù)數(shù)量由
transform-origin
定義：用于設置元素的變換中心點。
語法
transform-origin： X Y Z;
transform-origin： X Y ;
transform-origin： X ;
屬性值:transform-origin:center center;
X：任意長度值 | 關鍵詞纱意。表示X軸的偏移婶溯。
y：表示長度值 | 關鍵詞。表示y軸的偏移
z：表示長度值 | 關鍵詞。表示z軸的偏移
兩個值
- 如果只設置一個值迄委，那么第二只默認center
transform-style
定義：用于設置父元素是2d還是3d模式褐筛。
語法
transform-style：flat;
transform-style:prevverse-3d;
屬性值
- Flat：開啟2d平面空間
- Preserve-3d：開啟3d立體空間
perspective
定義：是否開啟透視 | 是否設置景深。 | 解釋 perspectiv指定的是z軸原點到屏幕的距離叙身。
語法
perspectve:none
perspective：長度值
屬性值：
- none：不設置景深
- 長度值：任何長度都可以用來設置景深
- 大景深 小變換：在相同的情況下渔扎，perspective
- 小景深 大變換：在相同
5perspective-origin
定義：指定了觀察者的位置。（設置消失點的位置）用作perspective屬性的消失點信轿。
語法
屬性值
- 數(shù)量
x - position：表示水平位置
y - position：表示垂直位置 - 屬性值類型
- 長度值：px % em rem vh vw
第一步：基礎設置
第二步：處理地面 晃痴，立方體，球三者的關系和大小
第三步：創(chuàng)建立方體
第四步：添加動畫效果
.scene{
animation:動畫名 2sx
}
