Web 成长周记-DK

transform

transform属性实现了一些可用SVG 实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素——只需要一行CSS代码。

一些前卫设计的最大诟病就是文字不可选(必须要使用切图的方法实现)。当你熟练使用transform属性来控制文字的时候，这就不再是问题了，因为这是个纯CSS方法，所以元素内的文字会保持可选。这是CSS相对于使用图片(或背景图片)的一个巨大优势。

一些有趣而有用的变形功能：

• rotate
  Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
• scale
  Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
• translate
  Translate就是基于X和Y 坐标重新定位元素
• skew
  顾名思义，skew就是要将对象倾斜，参数是度数
• matrix
  transform支持矩阵变换，就是基于X和Y 坐标重新定位元素
  

例如实现一个2D旋转：

div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
transform:rotate(9deg);
}