了解单词
transform:控制元素的移动，缩放，剪切，倾斜
origin ：允许你改变被转换元素的位置。
perspective：规定 3D 元素的透视效果。
translate：移动（本意是翻译）
scale：缩放
rotate：旋转
-
skew：倾斜，斜切
变换属性
属性 描述 transform 向元素应用 3D 转换 transform-origin 允许你改变被转换元素的位置。 transform-style 元素的风格样式 2D和3D之间的转换 perspective 规定 3D 元素的透视效果/或者是否开启透视。 perspective-origin 规定 3D元素的透视其实位置。 backface-visibility 定义元素在不面对屏幕时是否可见。
1.透视
透视指在平面上描述物体的空间关系的方法。
透视的特点：
1.近大远小
2.近快远慢
3.近实远虚
2.transform
定义：定义元素的变换：移动、旋转、缩放和倾斜四种。
移动
属性值：
translate() ： translateX()和translateY()的简写属性值，第一个值沿X轴（水平轴）发生位置移动，第二个值沿Y轴（垂直轴）发生位置移动。
translateX()：元素沿X轴（水平轴）发生位置移动
translateY()：元素沿Y轴（垂直轴）发生位置移动
-
translateZ()：元素沿Z轴（垂直于屏幕的轴）发生位置移动，translateZ() CSS函数沿着z轴在三维空间中重新定位元素,即,从观察者的角度而言更近或者更远。这个变换是由一个<length>元素定义的,它指定元素向内或向外移动的距离。
div{ tramsform： translate() | translateX() | translateY() }注：接受负值。
单词
front：前
back：后
left：左
right：右
top：顶
bottom：底
让div居中的方法有几种？
定位+translate|calc
-
外边距
给子元素添加 position：绝对； left：0； right：0； top：0； bottom：0； margin：auto；
-
弹性盒模型
display: flex; height: 100vh; justify-content: center; align-items: center;
网格
transform的数值
translate
定义：
设置元素的移动变换
语法：
translate()
translateX()
translateY()
translate3d()
translateZ()
translate属性值：
-
单位：属值型是任意长度值：px % em rem vh vw
- translateZ %是无效的因为div没有厚度
数量：属性数量由函数确定：1 - 3个
数量：多个属性值，使用逗号分隔
-
方向
- X轴： 正值向右 负值向左
- Y轴 ：正值向下 负值向上
- Z轴： 正值向前 负值向后
等价：translate（200px）等价于translateX（200px）
scale（）函数
定义：
用于对元素进行缩放变换
语法：
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
属性值：
- 数量：由函数决定 1 - 3属性值
- 类型：没有单位的数值，数值表示缩放系数。
- 范围：-11和1正无穷
- 2表示放大2倍
- 0.5表示缩小一半
- -0.5等于0.5
- 1无效果
- 等价：scale（2）效果同等scaleX（2）
rotate（）
定义：
用于定义对元素的旋转变换
语法：
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
属性值：
- 等价：rotate(30deg)效果同rotateX（30deg）
- 30deg：属性值是角度。deg表示角度单位
- 数量：由函数决定。1-4个
- rotate3d(x,y,z,角度)
skew（）
定义：
用于定义元素的斜切
语法：
skew()
skewX()
skewY()
参数：
- 参数是角度值，deg表示角度单位
- 参数数量由函数决定：1-2.
- 正值向左，负值向右
transform-origin
定义：
设置元素的起始位置
语法：
transform-origin:x;
transform-origin:x,y;
transform-origin:x,y,z;
属性值：
默认值：transform-origin：center center；
x：是任意长度值|关键词。表示x轴的偏移
y：是任意长度值|关键词。表示y轴的偏移
z：是任意长度值|关键词。表示z轴的偏移
两个值
- 如果只设置一个值，那么第二个值默认center
transform-style
定义：
元素的变换风格 用于设置父元素2D和3D之间的转换
语法：
transform-style:flat;
transform-style:preverse-3d;
属性值：
- flat：开启2d平面空间
- preserve-3d：开启3d立体空间
perspective
定义：
透视，是否开启透视|是否开启景深。解释：perspective指的是z轴原点到
语法
perspective:none;
perspective:长度值;
属性值：
- none：不设置景深
- 长度值：任何长度值都可以用来设置景深
- 大景深 小变换 在相同的变换参属下，pespective值越大，变换效果越微弱
- 小景深 大变换 在相同的变换参属下，pespective值越小，变换效果越强烈
perspective-origin
定义：
设置观察者的位置。（设置消失点的位置）
语法：
perspective-origin:x-position;
perspective-origin:x-position y-position;
属性值：
- 数量
- x-position：表示水平位置
- y-position：表示垂直位置
- 属性值类型
- 长度值：px % em rem vh vw
- 关键词：left right top bottom
repeating-conic-gradient
定义：
函数用于创建一个重复的角度渐变。
旋转的立方体步骤
第一步：基础设置
第二步：处理地面，立方体，球三者的位置关系和大小
第三步：创建立方体
第四步：添加动画效果
.scene{
animation:动画名 2s infite;
}
