H5C3-day03

1.transition过渡

         /*
            transition-property css过渡类型
            transition-duration 动画时间
            transition-timing-function 动画曲线
            曲线函数 ease ease-in ease-in-out ease-out 
                    linear step-end step-start
            transition-delay 是否延迟执行
        */
        .box {
            margin: 100px auto;
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* 改变类型  所用时间 时间曲线 */
            transition: all 0.5s ease;
        }

        .box:hover {
            width: 600px;
            height: 600px;
            background-color: aqua;
        }

2.transform变形

2.1 translate平移

使用translate方法来将文字或图像在水平方向和垂直方向上分别移动。

可以改变元素的位置，x、y可为负值

        .box {
            margin: 100px auto;
            width: 300px;
            height: 300px;
            background-color: red;
            transition: all 3s ease-in-out;
        }

        .box:hover {
            /* transform: translateX(500px); */
            /* transform: translateY(500px); */
            transform: translate(500px, 300px);
        }

2.2 rotate旋转

可以对元素进行旋转，正值为顺时针，负值为逆时针；

使用单位为deg（度）

     /* 旋转 */
        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: red;
            transition: all .5s;
        }

        div:hover {
            /* 2d */
            transform: rotate(30deg);
        }

2.3 scale 缩放

可以对元素进行水平和垂直方向的缩放。

scale(X,Y)使元素水平方向和垂直方向同时缩放
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: red;
            transition: all 0.5s;
        }

        div:hover {
            transform: scale(1.1，0.8);
        }

2.4 skew倾斜

        /*
           transform:skew(30deg,0deg);
            第二个参数默认是零
         */

        .skew {
            width: 20rem;
            height: 20rem;
            background-color: red;
            transition: all .5s linear;
            margin: 100px auto;
        }

        .skew:hover {
            /* transform: skew(-80deg, 0); */
            /* transform: skew(0, -80deg); */
            transform: skew(0, 50deg);
            /* transform: skew(80deg, 0); */
        }

2.5 transform-origin  改变旋转原点

        .box {
            width: 400px;
            height: 200px;
            margin: 100px auto;
            transition: all .5s;
            transform-origin: left bottom;
            background-color: red;
        }

        .box:hover {
            transform: rotate(80deg);
        }

3. 3d旋转

3d旋转增加了一个z轴

左手法则：伸出左手，大拇指指向正轴方向，四个手指的指向即是旋转正向，但务必记住是左手！为正顺时针旋转，为负，逆时针旋转

        body {
            /*透视 视距*/
            perspective: 1000px;
        }

        .perspective {
            margin: 100px auto;
            width: 200px;
            height: 300px;
            background-image: url('/作业/img/12_cy5d.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            transition: all .5s;
            /*翻转背面不可见*/
            backface-visibility: hidden;
        }

        .perspective:hover {
            transform: rotateY(100deg)
        }

4.perspective透视

透视原理： 近大远小 。

perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

5.transform-style

transform-style: flat|preserve-3d;
preserve-3d 保留3d位置

6.animation动画

 .box {
            margin: 100px auto;
            width: 600px;
            height: 600px;
            border: 1px solid black;
        }

        .move {
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 动画名称 */
            animation-name: move;
            /* 动画时间 */
            animation-duration: 3s;
            /* 动画曲线 */
            animation-timing-function: ease-in;
            /* 延迟执行 */
            animation-delay: 1s;
            /* 运动方向
                alternate 交替
                reserve 翻转
            */
            animation-direction: alternate;
            /* 动画执行次数 */
            animation-iteration-count: infinite;
            /* 动画状态 
                running 运动
                paused 暂停
            */
            animation-play-state: running;
            /* 
                动画是否停止在最后一帧            
            */
            /* animation-fill-mode: ; */
        }

        /* @keyframes 动画名称{} */
        @keyframes move {
            from {
                transform: translateX(0px);
            }

            to {
                transform: translateX(500px);
            }
        }