CSS：
<style> div { width: 200px; height: 200px; background-color: pink; -ms-transform: rotate(45deg);/*IE9*/ -moz-transform: rotate(45deg);/*Firefox*/ -webkit-transform: rotate(45deg);/*Safari 和 Chrome*/ -o-transform: rotate(45deg);/*Opera*/ } </style>html：
<body> <div></div> </body>解析： -ms-transform: rotate(45deg); /IE9/ -moz-transform: rotate(45deg); /Firefox/ -webkit-transform: rotate(45deg); /Safari 和 Chrome/ -o-transform: rotate(45deg); /Opera/ 以上四句是兼容。 rotate(45deg)意思是:表示顺时针旋转，deg是CSS3中的角度单位。
解析： transform:scale(值)；它的值是指定的缩放的倍率，比如： 0.5就是缩放到50%； 1就是100%； 1.5就是放大150%； 可能值：scale（x,y)是元素X轴Y轴同时缩放； scaleX（x)是元素X轴缩放； scaleY（y)是元素Y轴缩放；
transform : skew(值)；它的值就是角度， 可能值： skew(x,y);是元素在水平和垂直方向同时扭曲，只有一个参数时只在水平方向倾斜。 skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）；
解析： translate(值）;值是移动的距离。 可能值： translate(x,y);是元素在水平和垂直方向同时移动。 translateX(x)仅使元素在水平方向移动（X轴移动）； translateY(y)仅使元素在垂直方向移动（Y轴移动）；
鼠标未放上：
鼠标放上，图片颜色慢慢旋转、放大、过渡到粉色效果，离开后还原：
html：
<body> <div class="box"></div> </body>CSS:
<style> .box { width: 200px; height: 200px; border: 1px solid #aaa; background-color: red; transition: all 1s linear; /*W3C标准*/ -webkit-transition: all 1s linear;/*谷歌*/ -moz-transition: all 1s linear;/*火狐*/ -o-transition: all 1s linear;/*opera*/ } .box:hover { background-color: pink; transform: rotate(15deg) scale(1.2); /*W3C标准*/ -webkit-transform: rotate(15deg) scale(1.2); /*谷歌*/ -moz-transform: rotate(15deg) scale(1.2); /*火狐*/ -o-transform: rotate(15deg) scale(1.2); /*opera*/ } </style>解析：
all : 所有属性都将获得动画效果；也可以把all换成background一个属性，即：transition: background 1s linear; 1s : 规定完成动画效果的需要花费的时间； liner : 在延续时间段，变换的速率变化是匀速变化；其次还有ease(逐渐变慢)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)。
