CSS3学习笔记（二）之CSS转换

转换就是元素改变形状、颜色和位置。

浏览器支持：Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9 需要前缀 -ms-。

2D转换

translate() \ translateX(n) \ translateY(n)

元素从当前位置移动，根据给定的left（x坐标）和top（y坐标）。

例：div { transform:translate(50px,100px) }    元素从左侧移动50px，从顶端移动100px。

rorare()

元素顺时针旋转给定的角度，允许负值将逆时针旋转。

例：div{ transform: rorate(30deg) } 元素顺时针旋转30度。

scale() \ scaleX() \ scaleY()

增加或减少元素的尺寸，根据给定的宽度和高度参数。

例：div{ transform: scale(2,4)} 将宽度转换为原始尺寸的2倍，高度转换为原始高度的4倍。

skew() \ skewX() \ skewY()

元素翻转给定的角度，根据给定的水平线和垂直线参数。

例：div{ transform: skew(30deg,20deg) }围绕X轴元素翻转30度，围绕Y轴翻转20度。

matrix()

把所有的2D转换方法组合在一起。该方法需要6个参数，包含数学函数。

3D转换

rotateX()

roateY()

围绕X或Y轴按照给定度数进行旋转。

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3