使用 CSS3 中的 Transform 定义元素的旋转/倾斜

Question

CSS3 相对与 CSS2 加入很多新的属性，当然兼容问题可能没法解决，不过这是一种趋势，老版本的浏览器肯定会被取代，就让我们来看看 CSS3 中 360 度旋转、旋转放大、移动等特效制作方法。 CSS2 还是没有翻转的，CSS3 里面有 rotate 属性，这个可以把元素进行任意角度旋转，灰常强大。除了这个 rotate 旋转，还有一个 scale 缩放，一般用法格式是

-moz-transform:scale(1,1);

括弧里面（1,1）前者表示 X 轴，后者表示 Y 轴，当数字大于 1 时放大，大于 0 并小于 1 时缩小，很好理解，那么负数是怎样的效果？答案是翻转。

-moz-transform:scale(-1,1); //水平翻转
-moz-transform:scale(1,-1); //垂直翻转

360°旋转

修改 rotate 旋转度数即可实现不同的效果

a{
  transition:All 0.4s ease-in-out;
  -webkit-transition:All 0.4s ease-in-out;
  -moz-transition:All 0.4s ease-in-out;
  -o-transition:All 0.4s ease-in-out;
}
a:hover {
  transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
}

有没有想问 rotation=4 是什么效果? 90、180、270 度都出来了，还要 rotation=4 实现 360 干嘛，感觉这个很费呢？

不过这个是静态的，如果动态的话，这个就是必须的了。假如用 JavaScript 控制元素旋转，从 0 顺时针旋到 270 的时候，如果没有 360 的话，那么 270 会快速的逆时针回到 0，这样就 2 了，所以要给个 360 过渡，让 270 自然到 360，然后再循环，这样就流畅了。

放大

a:hover {
 transform:scale(1.2);
 -webkit-transform:scale(1.2);
 -moz-transform:scale(1.2);
 -o-transform:scale(1.2);
 -ms-transform:scale(1.2);
}

旋转放大

a:hover {
 transform:rotate(360deg) scale(1.2);
 -webkit-transform:rotate(360deg) scale(1.2);
 -moz-transform:rotate(360deg) scale(1.2);
 -o-transform:rotate(360deg) scale(1.2);
 -ms-transform:rotate(360deg) scale(1.2);
}

上下移动

a:hover {
 transform:translate(0,-10px);
 -webkit-transform:translate(0,-10px);
 -moz-transform:translate(0,-10px);
 -o-transform:translate(0,-10px);
 -ms-transform:translate(0,-10px);
}