<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3变形transition</title> </head> <style> /*div#translate { 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
