CSS转换，过渡，动画的学习

一：转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

• translate(50px,100px)   移动
• rotate(30deg)                旋转
• scale(2,2)                      缩放
• skew(30deg,20deg)      倾斜
• matrix()                          矩阵

<div class="main">
    <h2>一、transform:(2D转换)</h2>
    <h3>1.translate(移动,转变) 方法</h3>
    <div class="public translate">
    </div>

    <h3>2.rotate(旋转) 方法</h3>
    <div class="public rotate">
    </div>

    <h3>3.scale(缩放,改变大小) 方法</h3>
    <div class="public scale">
    </div>

    <h3>4.skew(倾斜) 方法</h3>
    <div class="public skew">
    </div>

    <h3>5.matrix() 方法</h3>
    <div class="public matrix">
    </div>
</div>
<div class="main">
    <h2>二、transform:(3D转换)</h2>
    <h3>1.rotateX(X轴旋转) 方法</h3>
    <div class="public rotateX">
        我向前后旋转
    </div>

    <h3>2.rotateY(Y轴旋转) 方法</h3>
    <div class="public rotateY">
        我向左右旋转
    </div>
    <h3>2.rotateY(Z轴旋转) 方法</h3>
    <div class="public rotateZ">
        我向上下旋转
    </div>
</div>

.main {
            width: 800px;
            margin: auto;
            padding: 50px;
        }

        .public {
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            background-color: greenyellow;
            border-radius: 8px;
        }

        .translate:hover {
            transform: translate(50px, 50px);
        }
        .rotate:hover {
            transform: rotate(45deg);
        }
        .scale:hover {
            transform: scale(2,2);
        }
        .skew:hover {
            transform: skew(30deg,0deg);
        }
        .matrix:hover {
            transform:matrix(0.866,0.5,-0.5,0.866,2,0);
        }

        @keyframes rotateX {
            from{
                transform: rotateX(0deg);
            }
            to{
                transform: rotateX(45deg);
            }
        }

        @keyframes rotateY {
            from{
                transform: rotateY(0deg);
            }
            to{
                transform: rotateY(50deg);
            }
        }
        @keyframes rotateZ {
            from{
                transform: rotateZ(0deg);
            }
            to{
                transform: rotateZ(50deg);
            }
        }
        .rotateX:hover{
            animation: rotateX 3s;
        }
        .rotateY:hover{
            animation: rotateY 3s;
        }
        .rotateZ:hover{
            animation: rotateZ 3s;
        }

二：过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。​​​​​

• transition: height 2s ease-in 0s         简写
• transition-property: height;                过渡css属性
• transition-duration: 2s;                      过渡持续时间
• transition-timing-function: ease-in;    过渡时间函数
• transition-delay: 0s;                           过渡推迟时间

    .demo1{
      width: 200px;
      height: 100px;
      background-color: aqua;
      /*过渡属性*/
      transition-property: height,background-color;
      /*过渡持续时间*/
      transition-duration: 2s;
      /*过渡时间函数*/
      transition-timing-function:ease-in;
      /*过渡推迟*/
      transition-delay: 0.5s;
    }
    .demo1:hover
    {
      height:200px;
      background-color: #ff4400;
    }

三：动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

CSS3 @keyframes 规则

百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

• animation                                简写
• animation-name                      动画名称
• animation-duration                  动画持续时间
• animation-timing-function        动画时间函数
• animation-delay                       动画推迟时间
• animation-iteration-count         动画迭代次数
• animation-direction                  播放方向（正逆）
• animation-play-state                播放状态（paused，running）