第七章：CSS3基础---变形旋转 2d/3d、c3边框图片、变形缩放 2d/3d、变形倾斜2d、动画属性

<1..变形旋转 2d/3d>

    x轴旋转 transform:rotateX(数值deg)

    y轴旋转 transform:rotateY(数值deg)

    z轴旋转 transform:rotateZ(数值deg)/rotate(数值deg)

    xy轴旋转

        transform:rotateX(数值deg) rotateY(数值deg); 有顺序

    xyz轴旋转

        transform:rotate3d(x,y,z,d) xyz是否旋转 1:旋转 0:不旋转 d:旋转度数

        transform:rotateX(数值deg) rotateY(数值deg)  rotateZ(数值deg)

景深 perspective:数值px; 值越小，离得越近，看到的元素会越大，一般都加在变形元素的父元素身上(相当于在容器里面插了一个眼睛，值是眼睛距离变形元素的距离)

变形原点 transform-origin:水平 垂直;值的设置和背景图位置一样

    旋转和位移

    旋转和位移同时出现的时候，两个属性值之间是有顺序的

    transform:translateX(400px) rotateY(40deg) 位移的时候旋转

    transform:rotateY(40deg) translateX(400px) 旋转之后坐标轴改变，会在新的坐标轴上位移

<2.. c3边框图片 >

    图片四个角裁切50的大小 其余部分会填充出来*/

        border-image: url(img/3.webp) 50;

<3..变形缩放 2d/3d>

    x轴缩放 transform:scaleX(数值) 0:直接隐藏 1:不缩放 0-1缩小 >1放大

    y轴缩放 transform:scaleY(数值) 0:直接隐藏 1:不缩放 0-1缩小 >1放大

    Z轴缩放 transform:scaleZ(数值) 0:直接隐藏 1:不缩放 0-1缩小 >1放大

    xy轴都缩放

        transform:scaleX(数值) scaleY(数值)

        transform:scale(x,y) 只写一个值代表x和y都缩放

    xyz轴缩放

        transform:scaleX(数值) scaleY(数值) scaleZ(数值)

        transform:scale3d(x,y,z)

<4..变形倾斜2d>

    x轴倾斜 transform:skewX(数值deg)

    y轴倾斜 transform:skewY(数值deg)

<5..动画属性>

    定义动画--告诉元素在什么样的时间干什么样的事情

        在什么样的时间-关键帧

        干什么的事情-添加样式

        @keyframes 动画名{

            form to就是关键帧 划分总共动画执行的时间

            from{}

            to{}

        }

        @keyframes 动画名{

            百分数就是关键帧 划分总共动画执行的时间

            0%{}

            20%{}

            40%{}

            100%{}

        }

    使用动画

        1. animation-name:动画名;  必须 根据动画名去使用动画

        2. animation-duration:数值s/ms; 必须 动画执行时间

        3. animation-delay:数值s/ms; 动画延迟时间

        4. animation-timing-function:ease/linear; 动画执行效果

        5. animation-iteration-count: 数值/infinite(无限次) 动画重复次数

        6. animation-direction:normal(0%-100%)/reverse(100%-0%)/alternate(0%-100%-0%)  动画执行方向

        7. animation-fill-mode:backwards(开始关键帧)/forwards(结束的关键帧) 动画停留的关键帧

        8. animation-play-state:running/paused(暂停) 暂停动画,一般结合hover使用

        复合写法 animation:动画名 动画执行时间 动画延迟时间 动画执行效果 动画重复次数 动画执行方向 动画停留的关键帧

            - 只有动画名和执行时间是必须的

            - 没有顺序

    特点：

        1. 可以不结合hover

        2. 可以限制执行次数

        3. 可以添加多个关键帧