<!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