单词
前：front 前端：front-end
后：back
左：left
右：rigth
顶：top
底：bottom
如何让一个div水平垂直居中
方法一：使用定位 + translate（）| calc（）
方法二：弹性盒模型
方法三：外边距自动获取
方法四：网格
translate（）
定义移动变换
语法
translate（）
translate3d（）
translateX（）
translateY（）
translatez（）
属性值
- 单位： 数值是任意长度值：px % em rem vh vw
- translateZ(50%)/无效 因为div没有厚度/
- 数量： 属性值数量由函数确定：1 - 3个
- 数量：多个属性值，使用逗号分隔
- 方向：
- X:正值向右 负值向左
- Y:正值向下 负值向上
- Z：正值向前 负值向后
- 等价：translate（200px）等价于translateX（200px）
scale()函数
定义：用于对元素进行缩放变换。
用法：
scale（）
scale3d（）
scaleX（）
scaleY（）
scaleZ（）
参数值
- 数量由函数决定：1 - 3个属性值
- 类型：没有单位的数值。 数值表示缩放系数。
- 范围：[-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表示角度单位。
- 数量：由函数决定。1 - 4
skew（）
定义：用于对元素进行斜切变换
语法
skew()
skewX()
skewY()
参数：参数是角度值。deg表示角度单位
- 参数数量由
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属性的消失点。
语法
属性值
- 数量
x - position：表示水平位置
y - position：表示垂直位置 - 属性值类型
- 长度值：px % em rem vh vw
第一步：基础设置
第二步：处理地面 ，立方体，球三者的关系和大小
第三步：创建立方体
第四步：添加动画效果
.scene{
animation:动画名 2sx
}
