深圳建设集团网站企网
空间转换
空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。 空间转换也叫 3D转换
属性：transform
平移
/*单独设置 z轴效果不明显*/
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();取值（正负均可）
- 像素单位数值
- 百分比（参照盒子自身尺寸计算结果）
提示
默认情况下，Z 轴平移没有效果
视距 perspective
作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性：( 添加给父级，取值范围 800-1200)
旋转
配合 视距perspective（800~1200） 效果更佳哦
/*绕着z轴而转 方向：顺时针*/
transform: rotateZ(值deg);
/*绕着x轴而转 方向：向里面*/
transform: rotateX(值deg);
/*绕着y轴而转 方向：向里面*/
transform: rotateY(值deg);左手法则 – 根据旋转方向确定取值正负
左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向
立体呈现 – transform-style
作用：设置元素的子元素是位于 3D 空间中还是平面中
属性名：transform-style
属性值：
flat：子级处于平面中
preserve-3d：子级处于 3D 空间
/*给父级元素*/
transform-style: preserve-3d;呈现立体图形步骤
1. 父元素添加transform-style: preserve-3d；
2. 子级定位
3. 调整子盒子的位置（位移或旋转）
提示 : 空间内，转换元素都有自已独立的坐标轴，互不干扰
旋转改变了原有的坐标轴向
缩放
transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();动画 （animation）
过渡：实现两个状态间的变化过程
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
/*定义动画:第一种*/
@keyframes 动画名称 {from{}to{}
}
/*定义动画:第二种*/
@keyframes 动画名称 {
/*百分比表示 动画时长的百分比*/0% {}10%{}......100%{}
}
使用动画：
animation:动画名称 动画时长（s） 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
速度曲线：linear 匀速运动
分布动画：steps() 配合精灵图使用
提示：
动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
/* 动画时长 */
animation-duration: 1s;/* 播放次数 */
animation-iteration-count: infinite;
.box:hover {/* 暂停动画 */animation-play-state: paused;}多组动画
animation:动画1，动画2，动画n
;
animation:
run 1s steps(12) infinite,
move 3s linear forwards
;img {/*图片为行内元素，不能设置宽高，要变为块元素，切记 */display: block;width: 200px;}