Web笔记Day02

2023年12月18日

一、空间转换

1. 空间转换-平移

定义

空间，是从坐标轴角度定义的X、Y和Z三条坐标轴构成了一个立体空间；
Z轴位置与视线方向相同，正方向指向我。

属性

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

取值

正负均可
像素单位数值
百分比(参照盒子自身尺寸计算结果)

$\color{red}{PS: 3d小括号里面必须逗号分隔开三个数，否则无效果。}$

2. 视距 perspective

作用

指定了观察者与Z=0平面的距离，为元素添加透视效果。

透视效果

近大远小、近实远虚。

属性

添加给父级，取值范围800-1200。
perspective：视距；
PS:视距属性必须添加给直接父级，否则无效。视距设置过大，效果不明显，视距设置过小，直接乎到脸上。

3. 空间转换-旋转

书写

transform: rotateZ(角度deg); //沿着Z轴旋转，效果跟平面旋转效果一样。
transform: rotateX(角度deg); //正值向后倒，负值往我扑。
transform: rotateY(角度deg);
PS:如果不给父级设置perspective，则图仅压缩，无近大远小看不出旋转。

左手法则

根据旋转方向确定取正负
左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向。

拓展

rotate3d(x,y,z,角度度数)：用来设置自定义旋转轴的位置及旋转的角度。
x,y,z取值为0-1之间的数字。

4. 立体呈现

作用

设置元素的子元素是位于3D空间中还是平面中

属性名

transform-style

属性值

flat:子级处于平面中。
preserve-3d：子级处于3D空间。

呈现步骤

1.父元素添加transform-style: preserve-3d;
2.子级定位
3.调整子盒子的位置（位移或旋转）

5. 空间转换-缩放

属性

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

二、动画

$\color{maroon}{animation:加强版的过渡。}$

1. 过渡与动画

过渡：实现两个状态间的变化过程
动画：实现多个状态见的变化过程，动画过程可控（虫回复播放、最终画面，是否暂停）

2. 动画实现步骤

定义动画

<!--两个状态-->
@keyframes 动画名称 1{
    from {}
    to {}
}
<!--多个状态-->
@keyframes 动画名称2 {
    0% {}
    10% {}
    ……
    100% {}
}

使用动画

animation: 动画名称动画时长s；

代码

<style>
    .box{
        width: 200px;
        height: 100px;
        background-color: pink;
        /*使用动画*/
        animation: change 1s;
    }
    /*动画一：宽度从200变化到800*/
    @keyframes change{
        from{
            width: 200px;
        }
        to{
            width: 800px;
        }
    }
    /*
    动画二：从200*100变化到300*300再变化到800*500
    (n%：动画时长百分比)
    */
    @keyframes change{
        0%{
            width: 200px;
            heoght: 100px
        }
        20%{
            width: 300px;
            height: 300px;
        }
        100%{
            width: 800px;
            height: 500px;
        }
    } 
</style>

animation属性

普通写法：
animation: 动画名称动画时长s 速度曲线延迟时间重复次数动画方向执行完毕时状态；
$\color

文章归档

最新文章