11HTML+CSS

空间：是从坐标轴角度定义的 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 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）