空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。 l 空间转换也叫 3D转换 l 属性：transform 。
属性 l 取值（正负均可） u 像素单位数值 u 百分比（参照盒子自身尺寸计算结果） l 提示 l 默认情况下，Z 轴平移没有效果 空间转换 – 平移 transform: translate3d(x, y, z); transform: translateX(); transform: translateY(); transform: translateZ();
视距 perspective，作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果 透视效果：近大远小、近实远虚 属性：(添加给父级，取值范围 800-1200)。
perspective: 视距;
空间 – 旋转：transform: rotateZ(值); l transform: rotateX(值); l transform: rotateY(值);
左手法则 – 根据旋转方向确定取值正负 左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向。
立体呈现 – transform-style。作用：设置元素的子元素是位于 3D 空间中还是平面中 属性名：transform-style 属性值： p flat：子级处于平面中 p preserve-3d：子级处于 3D 空间。
呈现立体图形步骤 1. 父元素添加transform-style: preserve-3d； 2. 子级定位 3. 调整子盒子的位置（位移或旋转） l 提示 l 空间内，转换元素都有自已独立的坐标轴，互不干扰。
空间转换 – 缩放，属性 空间转换 – 缩放 transform: scale3d(x, y, z); transform: scaleX(); transform: scaleY(); transform: scaleZ();
动画 - animation。
过渡：实现两个状态间的变化过程 l 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画名称和动画时长必须赋值 l 取值不分先后顺序 l 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间。
动画 – 多组动画 animation: run 1s steps(12) infinite, move 3s linear forwards
标签：动画,转换,transform,11HTML,空间,取值,CSS,属性 From： https://www.cnblogs.com/Lyh3012648079/p/18349917