移动Web（二）

空间转换（3D）

1.空间位移

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。 x 、y 和z 三条坐标轴构成了一个立体空间， z轴位置与视线方向相同。 也叫 3D转换

属性：transform

语法

• transform: translate3d(x, y, z);
• transform: translateX(值);
• transform: translateY(值);
• transform: translateZ(值);

取值（正负均可）

• 像素单位数值
• 百分比

div{
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin: 400px 400px;
            transition: all .8s;
        }
        div:hover{
            transform: translate3d(0,0,300px);
            /* 空间位移 */
        }

2.透视

目标：使用perspective属性实现透视效果

属性（添加给父级）

• perspective: 值;
• 取值：像素单位数值， 数值一般在800 – 1200。
• 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

作用

• 空间转换时，为元素添加近大远小、近实远虚的视觉效果

body{
            perspective: 800px;
            /* 给父级设置透视 */
        }
        div{
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin: 400px 400px;
            transition: all .8s;
        }
        div:hover{
            transform: translate3d(0,0,300px);
            /* 空间位移 */
        }

3.空间旋转

目标：使用rotate实现元素空间旋转效果

语法：

• transform: rotateZ(值);
• transform: rotateX(值);
• transform: rotateY(值);

左手法则： 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

div{
            width: 400px;
            height: 400px;
            margin: 100px 100px;
            perspective: 800px;
            /* 设置透视 */
        }
        img{
            width: 100%;
            height: 100%;
            transition: all .8s;
            /* 添加过渡效果 */
        }
        div:hover img{
            transform:translateX(800px) rotateY(360deg);
            /* 旋转的左手法则，负值时相反 */
        }

4.立体呈现

呈现立体图形步骤：

1. 盒子父元素添加transform-style: preserve-3d；

2. 按需求设置子盒子的 位置（位移或旋转）

注意： 空间内，转换元素都有自已独立的坐标轴，互不干扰

5.空间缩放

目标：使用scale实现空间缩放效果

语法

• transform: scaleX(倍数);
• transform: scaleY(倍数);
• transform: scaleZ(倍数);
• transform: scale3d(x, y, z);

            /* scaleX是放大宽 */
           transform: scaleX(2);
            /* scaleY是放大高 */
            transform: scaleY(2);

动画

目标：使用animation添加动画效果

实现步骤

1.1 定义动画(动画名称不可用中文)

@keyframes 动画名称 {
            from {}
            to {}
         }


@keyframes 动画名称 {
            0% {}
            25% {}
            50% {}
            100% {}
         }

2. 使用动画

animation: move 5s
/* 调用动画 */
/* animation: 动画名 动画时长*/

动画属性

• 使用animation相关属性控制动画执行过程（补间动画）

animation: move 5s linear infinite;
            /* 调用动画 */
            /* animation: 动画名 动画时长 动画速度 延迟时间 次数 动画方向*/
            /*动画执行完毕的状态(forward:最后一帧/backwards:第一帧状态)不能和无线循环、动画的方向一起使用*/

• 使用steps实现逐帧动画

帧动画：开发中，一般配合精灵图实现动画效果。

animation-timing-function: steps(N)；

将动画过程等分成N份

animation: run .8s steps(12) infinite;
            /* 添加动画名，动画时间，设置为逐帧动画 循环播放 */

• 使用animation属性给一个元素添加多个动画效果

animation: 动画名 属性, 动画名 属性, 动画名 属性;