<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>调试练习</title>
<style>
#box{
200px;
height: 200px;
background-color: green;
position: absolute;
left: 50px;
top: 50px;
/*transform:skew(10deg,10deg) */
}
#box:hover{
/*放大缩小 正值0-1为缩小 1以上为变大 负数为先倒转再改变大小*/
/*transform:scale(-1)*/
/*旋转角度*/
/*transform:rotate(45deg)*/
/*位置移动，第一个值为离X轴的偏移距离，第二个值为离Y轴的偏移距离*/
/*transform:translate(100px,20px);*/
/*倾斜动画，这里不同于rotate还会变形图片，当然你也可以在css里写，改变图形样式，不是通过动画hover之类变形*/
/*transform:skew(30deg,-10deg);*/
/*这也是一种图片变形*/
/*transform:matrix(1,0.4,0,1,0,0);*/
transform:translate(100px,20px) rotate(45deg) scale(1.5) ;
transition:transform 3s
}
</style>
</head>
<body>
<div id="box">hb</div>
</body>
</html>