移动 Web核心笔记（二）

空间转换

空间：是从坐标轴角度定义的 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;
        }