webkit-transform 的含义

最新推荐文章于 2025-11-05 18:43:02 发布

原创最新推荐文章于 2025-11-05 18:43:02 发布 · 4.4w 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS中的变形属性，包括缩放(scale)、旋转(rotate)、平移(translate)和倾斜(skew)等效果的实现方式。通过具体示例说明了如何在不同浏览器中兼容地使用这些属性。

webkit-transform 的含义

-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持。

如下表示的是在 X 轴向右移动 50px, Y 轴向下移动 100px。

div {
  -ms-transform: translate(50px, 100px);
  -webkit-transform: translate(50px, 100px);

  transform: translate(50px, 100px);
}

- `scale`：缩放，1 为原始大小。参数正数时放大，负数缩小。属性值为一个时，`x/y` 轴同时缩放；属性值为两个值时，分别控制 `x`、`y` 轴的缩放。

- `rotate`：水平旋转，属性值格式为 `Xdeg`。`X` 为正数时，顺时针旋转；为负数时，逆时针旋转

- `translate`：平移，基于 `XY` 轴重新定位元素。属性值为一个时，`x`、`y` 轴参数相同；为两个时，`x`、`y` 轴分别定位

- `skew`：将元素沿水平方向倾斜变形。属性值为一个时，`x/y` 轴参数相同；为两个时，`x`、`y` 轴各自倾斜