前端从0到1--移动WEB空间&动画软工在读学生、未婚、每日简单分享前端笔记前端从0-1--移动webDay02空间位

一、空间转换

1.空间位移

```
transform:translateX()   X轴位移
```
```
transform:translateY()   Y轴位移
```
```
transform:translateZ()   Z轴位移
```

transform:translate3d(x,y,z) xyz轴同时位移

<style>
        .box{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
        }
        .box1{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: #6cf;
            /* 添加一个过度方便观察效果 */
            transition: all 1s linear;
        }
        .box:hover .box1{
            /* 鼠标指向box box1就会向X轴位移 */
            transform: translateX(200px);
            /* 鼠标指向box box1就会向Y轴位移 */
            /* transform: translateY(200px); */
            /* 没有添加透视效果 看不出效果 */
            /* transform: translateZ(200px); */
        }
    </style>

    <div class="box">
        <div class="box1"></div>
    </div>

二、透视、景深、视距 perspective

 1.给父元素添加 实现一个近大远小的效果 常设范围600-1200像素

     <style>
        .box{
            width: 500px;
            height: 400px;
            border: 1px solid #000;
            /* 设置一个透视效果 实现近大远小*/
            perspective: 600px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: #6cf;
            margin: 50px auto;
            transition: all 1s linear;
        }
        .box:hover .box1{
            /* 鼠标悬浮到box上时 box1沿Z轴正方向移动100px */
            transform: translateZ(100px);
        }
    </style>

     <div class="box">
        <div class="box1"></div>
    </div>

三、空间旋转

围绕X轴做旋转 rotateX(角度deg)
围绕Y轴做旋转 rotateY(角度deg)
围绕Z轴做旋转 rotateZ(角度deg) css

<style>
        .box{
            width: 200px;
            height: 400px;
            border: 1px solid #000;
            background-color: #6cf;
            margin: 100px auto;
            transition: all 1s linear;
        }
        .box:hover{
            /* 围绕X轴旋转 */
            transform: rotateX(180deg);
            /* 围绕Y轴旋转 */
            transform: rotateY(180deg);
            /* 围绕Z轴旋转 */
            transform: rotateZ(180deg);
        }
    </style>

html

    <div class="box"></div>

左手定则 -左手的大拇指指向轴线的正方向，四指弯曲的方向即为正值旋转的方向 -自定义轴旋转 -transform:rotate3d(x,y,z,旋转的角度) -同时在两条轴线上旋转

transform:rotateX(),rotateY()
3d导航的时候给我们提供额一个上帝视角

四、3D呈现 preserve-3d

css

<style>
        .box {
            margin: 100px auto;
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            transform: rotateX(80deg);
            transform-style: preserve-3d;
        }

        .box1 {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            transform: rotateY(80deg);
        
        }
    </style>

html

    <div class="box">
        <div class="box1">
        </div>
    </div>

五、动画

定义动画 @keyframes 动画名称{} css

    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background-color: #6cf;
            margin: 100px auto;
        }

        @keyframes move {
            10%{
                background-color: #111;
            }
            50%{
                background-color: #555;
            }
            100%{
                background-color: #999;
            }
        }
        .box:hover{
            animation: move 1s linear infinite alternate;
        }
    </style>

html

    <div class="box"></div>

animation: name duration timing-function delay iteration-count direction fill-mode;

调用动画：动画名称动画执行时间延迟执行时间次数方向速度曲线反向播放停留结束位置

速度曲线 ease默认 linear匀速 steps()逐帧动画
次数 infinite 无限次
反向播放 alternate
停留结束位置 forwards
暂停动画 animation-play-state：paused; 6.动画延迟： animation-delay