转换就是元素改变形状、颜色和位置。
浏览器支持: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 |