Rotate

transform属性有很多用法，其中一个就是translate(旋转)。translate就是基于角度转动一个对象并可用于内联元素和块级元素，它可以实现 很酷的效果 。

#nav{
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 }

请注意在IE8中(非标准模式)它需要你写成“-ms-filter”而不是“filter”。

浏览器支持

浏览器对translate的支持令人惊奇的广泛。在上面的CSS片段中，我们直接加上-webkit-和-moz-前缀然后将#nav元素旋转-90度。

相当简单吧？唯一的问题是对于一个相当重要的设计元素，如果IE不支持，很多设计师就会不情愿使用它。

幸运的是，IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值：0, 1, 2,和3。你将不会获得和Webkit和Gecko一样的精密控制，但是至少在一定程度上保持统一(甚至IE6)。虽然这个滤镜只支持4个值，显得有些鸡肋，但是对于IE来说，聊胜于无吧。

scale

scale并不像你想象的那样工作：简单的缩小和放大一个元素。缩放功能同时采用宽和高两个值，这些值可以是正数、负数和小数。

正数值放大一个元素，正如你期望的那样，基于指定的宽度和高度。

负数值并不会缩小元素，而是翻转它(比如，文字被反转)然后相应的缩放它。然而，你可以使用小于1的小数(例如.5)来收缩或者缩小一个元素。

#nav {
 /* nav元素的宽和高都会被放大双倍 */
 -webkit-transform: scale(2);
 -moz-transform: scale(2); }
#nav {
 /* nav元素的宽会是双倍，而高度保持不变 */
 -webkit-transform: scale(2, 1);
 -moz-transform: scale(2, 1);
 }
#nav {
 /* nav的宽度将是双倍，并且水平翻转，但是高度保持不变 */
 -webkit-transform: scale(-2, 1);
 -moz-transform: scale(-2, 1);
 }

浏览器支持

scale属性目前只有Firefox, Safari 和Chrome支持，到目前为止没有一个IE版本支持。缩放一个对象是相当有意义的设计选择。它可以通过渐进增强来使用:hover，这可以在你的导航上添加一个小小的趣味。

#nav li a:hover{
 /* 这可以让你的导航链接在鼠标经过的时候轻微的放大 */
 -webkit-transform: scale(1.1); -moz-transform: scale(1.1);
 }

出处：前端观察
责任编辑：bluehearts

上一页 你需要知道的CSS3动画技术 [1] 下一页 你需要知道的CSS3动画技术 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。