CSS 2D变换

A. 转型 在CSS中，通过元素的形状、大小和位置来修改元素。它沿X轴和Y轴变换元素。以下列出了6种主要的转换类型：

• 翻译（）
• 轮换
• 比例尺
• skewX（）
• skewY（）
• 矩阵（）

我们将实现所有这些功能，并通过示例理解它们的概念。

translate（）方法 : translate（）方法用于沿X轴和Y轴将图元从其实际位置移动。

例子： 本例描述了CSS translate（）方法，该方法可以从元素的实际位置修改元素的位置。

输出：

rotate（）方法 : rotate（）方法根据给定的角度顺时针或逆时针旋转图元。程度在括号中给出。

例子： 本例描述了CSS rotate（）方法来顺时针或逆时针旋转元素。

输出：

逆时针旋转： 使用负值逆时针旋转图元。

例子： 本例描述了CSS Counter clock rotate（）方法，该方法使用负值顺时针旋转元素。

输出：

scale（）方法 : 它用于根据给定的宽度和高度参数增加或减少元素的大小。

例子： 本例描述了CSS scale（）方法，该方法根据元素的宽度和高度调整元素的大小。

输出：

注： 元素的大小可以使用其宽度和高度的一半来减小。

skewX（）方法 : 此方法用于沿X轴以给定角度倾斜图元。

例子： 这个例子描述了CSS skewX（）方法来倾斜X轴上的元素。

输出：

skewY（）方法 : 此方法用于沿Y轴以给定角度倾斜图元。

例子： 这个例子描述了CSS skewY（）方法来倾斜Y轴上的元素。

输出：

skew（）方法 : 该方法沿X轴和Y轴以给定角度倾斜元素。以下示例将图元沿X轴倾斜20度，沿Y轴倾斜10度。

例子： 本例描述了CSS skew（）方法，该方法可以使元素沿X轴和Y轴以给定角度倾斜。

输出：

矩阵（）方法 : 此方法将所有2D变换特性组合为一个特性。矩阵变换属性接受六个参数作为矩阵（scaleX（）、skewY（）、skewX（）、scaleY（）、translateX（）、translateY（））。

例子： 本例描述了CSS matrix（）方法，该方法将所有2D变换属性合并为一个属性。

输出：

支持的浏览器：

• 谷歌Chrome 36.0
• 微软Edge 12.0
• Internet Explorer 10.0
• Firefox 16.0
• 歌剧23.0
• Safari 9.0

注： Internet Explorer不支持全局值initial和unset。