CSS3动画变形transition 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS3变形transition</title>
    </head>
    <style>
        /*div#translate {
            width: 300px;
            height: 300px;
            background: #9D9D9D;
        }
        div#translate:hover{
            -webkit-transform:translate(100px,100px) scale(2,2) rotate(45deg) skew(30deg,30deg);
            !*先x，y移动100培训  缩放2倍  旋转45度 skew倾斜 *!
        }*/
        div#transition{
            width:200px;
            height:200px;
            background-color: green;
            /*-webkit-transition:none 1s linear 0s;*/
            /*-webkit-transition:all 1s linear 0s;*/
            /*transition 属性 变换延续时间  速率变化 延迟时间,属性 变换延续时间  速率变化 延迟时间*/
            -webkit-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
            -moz-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
            -ms-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
            -o-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
            transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
        }
        div#transition:hover{
            background-color: #3598DC;
            width:400px;
            height: 400px;
        }


    </style>
    <body>
        <div id="transition"></div>
        
        <!--<div id="rotat">rotate旋转</div>-->
        <!--<div id="scale">scale缩放</div>-->
        <!--<div id="skew">skew 倾斜</div>-->
        <!--<div id="translate">translate移动</div>-->
        <!--<p>旋转，倾斜 缩放 移动 transform</p>-->
    </body>

</html>

 

CSS3变形transition

 

 

 

 

 

 

 

 

posted @ 2016-12-02 17:00  轻轻走143  阅读(187)  评论(0)  编辑  收藏  举报