HTML中如何使用 CSS 实现元素 2D 转换
2021-04-01 本文已影响0人
等会再说
CSS3 2D 转换是指定义元素平面上的变换，主要表现为旋转，平移，缩放等效果。
CSS3 transform
CSS3 中通过设置元素的 transform 属性值来实现元素的不同2D转换。
浏览器支持
表格中的数字指表示支持该属性的浏览器首个版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
transform 属性
下面是 transform 属性值内容， 2D 转换方法如下：
- translate()
- rotate()
- scaleX()
- scaleY()
- scale()
- skewX()
- skewY()
- skew()
- matrix()
CSS 2D 转换示例
translate() 方法
img
translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。
下面的例子把 <div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：
示例
div {
transform: translate(50px, 100px);
}
