移动web

一，空间转换

1.空间位移：使用translate实现元素空间位移效果

` transform:translateX(值);
  transform:translateX(值);
  transform:translateX(值);
  transform:translate3d(x，y，z);`

例如：鼠标悬停box让box分别在X Y Z 方向移动100px

` .box:hover{
 transform:translate3d(100px,100px,100px);`

2.透视效果：使用perspective属性实现透视效果（必须添加给父元素）

作用：空间转换时，为元素添加近大远小，近实远虚的效果

`  perspective：1200px（取值范围400px-1200px）`

3.空间旋转：使用rotate实现元素空间旋转效果

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

空间旋转X轴80度：`transform: rotateX(80deg);`

空间旋转Y轴80度：`transform: rotateY(80deg);`

空间旋转Z轴80度：`transform: rotateZ(80deg);`

4.立体呈现：使用transform-style: preserve-3d呈现立体图形给父级元素添加

实现方法：添加 `transform-style: preserve-3d;` 使子元素处于真正的3d空间

例如：

.box {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: #0a0;
        transition: 1s;
        /* 开启3d立体环境 */
        transform-style: preserve-3d;
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: orange;
        /* 让橙色盒子沿着z轴，向人眼方向走200px */
        transform: translateZ(200px);
    }

5.空间缩放：使用scale实现空间缩放效果

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

二，动画

1.动画实现步骤

定义动画

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

使用动画

2.animation复合属性

animation:动画名称动画执行时间动画延迟时间速度曲线（linear）播放次数无限次（infinite）反向播放（alternate）停留在结束位置（forwards）没有顺序限制

3.animation拆分写法

animation-name ：动画名称

animation-duration 动画时长 animation-delay 延迟时间

animation-fill-mode 动画执行完毕时状态 forwards：最后一帧状态 backwards：第一帧状态

animation-timing-function 速度曲线 steps(数字)：逐帧动画 animation-iteration-count 重复次数 infinite为无限循环

animation-direction 动画执行方向 alternate为反向

animation-play-state 暂停动画 paused为暂停，通常配合:hover使用

4.逐帧动画：使用steps实现逐帧动画，一般配合精灵图实现动画效果

animation-timing-function: steps(N)； N将动画分成N等份

例如：

```.box{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 184px;
        height: 325px;
        background-image: url(./images/精神小伙.jpg);
        animation: move 2s infinite steps(8), walk 3s linear  forwards; /*使用动画*/
    }
    /*多个动画的使用用逗号，连接*/
    
    /*定义动画*/
    @keyframes move {
        to{
            background-position: -1472px 0;
        }
    }
    /*定义动画*/
    @keyframes walk {
        to{
            left: 50%;
            transform: translate(-50%);
        }
    }
    
    /*body部分*/
    <body>
         <div class="box"></div>
    </body>

空间转换动画

移动web

一，空间转换

二，动画