trannform:
translate(参数1，参数2)；让元素在X轴与Y轴方向发生偏移-->参数1：X；参数2：Y
rotate(参数1)；让元素进行旋转；单位(deg)
scale(参数1，参数2)；让元素在X轴与Y轴放大或缩小多少倍-->参数1：X；参数2：Y
skew(参数1，参数2)；skew(30deg,20deg)-->围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
transition:过渡效果
transition: all 1s linear 3s;
*过渡效果
参数1：用来指定对那些属性使用过渡效果 参数2：过渡效果的持续时间 参数3：过渡效果的显示速度变化 参数4：用来指定过渡效果的延迟时间*/
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<style> ???????#div1{ ???????????width: 100px; ???????????height: 100px; ???????????/*过渡效果 ??????????????参数1：用来指定对那些属性使用过渡效果 ??????????????参数2：过渡效果的持续时间 ??????????????参数3：过渡效果的显示速度变化 ??????????????参数4：用来指定过渡效果的延迟时间*/ ???????????transition: all 1s linear 3s; ???????????border: 1px solid red; ???????????margin: auto; ???????????background-image: url("../../../img/f3_Android1.png"); ???????????background-size: 100% 100%; ???????} ???????#div1:hover{ ???????????/*translate：让元素在X和Y轴发生偏移 参数1：X轴方向偏移 ?参数2：Y轴方向偏移 ?????????????translatex:让元素在X轴方向发生偏移 ?????????????translatey:让元素在Y轴方向发生偏移*/ ???????????/*transform: translate(50px,0);*/ ???????????/*scale:让元素在X轴和Y轴都发生缩放 ?参数1：X轴方向的方法倍数 参数2：Y轴方向的放大倍数 ?????????????scaleX：让元素在X轴方向发生缩放 ?????????????scaleY：让元素在Y轴方向发生缩放*/ ???????????transform: scaleX(1.5); ???????????/*rotate：让你的元素按照指定的中心点进行旋转 ???????????????rotateX:让元素沿着X轴旋转 ???????????????rotateY：让元素沿着Y轴旋转 ???????????*/ ???????????/*transform: rotateY(180deg);*/ ???????????/*transform: skewY(-90deg);*/ ???????????/*transform-origin:用来设置旋转的中心点*/ ???????????/*transform-origin: left;*/ ???????} ???</style> ???<title>变形效果</title></head><body><div id="div1"></div></body></html>
01.CSS动画-->transform
原文地址：http://www.cnblogs.com/ronghtp/p/7649693.html