CSS 2D转换translate()

本文概述

• CSS 2D转换
• 支持的浏览器
• translate()方法

CSS3支持transform属性。此transform属性有助于你平移, 旋转, 缩放和倾斜元素。

变换是用于更改形状, 大小和位置的效果。

转换有两种类型, 即CSS3支持2D和3D转换。

CSS 2D转换

CSS 2D变换用于将元素的结构更改为平移, 旋转, 缩放和倾斜等。

以下是2D变换方法的列表：

• 平移（x, y）：用于沿X轴和Y轴变换元素。
• translateX（n）：用于沿X轴变换元素。
• translateY（n）：用于沿Y轴变换元素。
• rotate()：用于根据角度旋转元素。
• scale（x, y）：用于更改元素的宽度和高度。
• scaleX（n）：用于更改元素的宽度。
• scaleY（n）：用于更改元素的高度。
• skewX()：它指定倾斜变换以及X轴。
• skewY()：指定与Y轴一起的倾斜变换。
• matrix()：指定矩阵变换。

支持的浏览器

translate()方法

CSS translate()方法用于根据给定的参数（即X轴和Y轴）将元素从其当前位置移动。

让我们以一个例子来翻译