单词

前：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
}