动画和3d变形

一、概念

           过渡：一般需要结合鼠标去使用

            动画：一运行自己动起来

二 、创建动画

        方式一：@keyframes 动画的名字{from{}to{}}

        方式二：@keyframes 动画的名字{0%{}...100%{}}

三、 使用动画：

        必须要写的：

           ① animation-name====动画的名字

          ②  animation-duration===动画的运动时间

        其他的：

            ③animation-delay===延迟时间

            ④animation-timing-function===动画的运动曲线（和过渡完全一致）

            ⑤animation-iteration-count===动画的运动次数

            ⑥animation-direction===动画的运动方向

                取值 ：       

                    normal===正常，从起点运动到重点

                    reverse===反转，从重点运动到起点

                    alternate====正反交替

                    alternate-reverse===反正交替

           ⑦ animation-play-state===动画的播放状态

                取值：

                        running===运动===默认值

                        paused===暂停

        重要：简写方式： animation:需要什么值就写什么

        注意：运动时间和延迟时间有书写顺序，其他没有（运动时间在前，延迟时间在后）

四、半圆的知识

语法： border-radius: ；

                 1个值：上下左右4个角同时变化

                2个值：左上角和右下角  右上角和左下角

                3个值：左上   右上和左下  右下

                4个值：左上 右上  右下  左下 顺时针的赋值顺序

五、3d变形

①位移语法：transform：translatex/y/z（数值px）

    坐标轴：

        x轴：向右为正，向左为负

        y轴：向下为正，向上为负

        z轴：向前为正，向后为负

    属性值：

           1.位移translate

            2.旋转rotate

            3.缩放scale

    注意：要想看到3d的效果

        1.必须给想要呈现3d效果的元素找一个父亲，在这个大盒子上要写

             transform-style: preserve-3d;

        2.必须适当的让3d空间(3d舞台)旋转一下

②旋转语法：transform: rotateY/x/z(数值deg);

③缩放语法： transform: scaleX/y/z(数值);