CSS 2D转换

通过使用 CSS transform 属性，可以实现2D转换效果：

translate（）方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

下面的例子把 <div> 元素从其当前位置向右移动 100个像素，并向下移动 100 个像素：

 

rotate（）方法根据给定的角度顺时针或逆时针旋转元素。

下面的例子把 <div> 元素顺时针旋转 45度：

 

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

下面的例子把 <div> 元素增大为其原始宽度的2倍和其原始高度的3倍：

 

scaleX() 方法增加或减少元素的宽度。

下面的例子把 <div> 元素增大为其原始宽度的2倍：

 

scaleY() 方法增加或减少元素的高度。

下面的例子把 <div> 元素增大到其原始高度的2倍：

 

skewX() 方法使元素沿 X 轴倾斜给定角度。

下例把 <div> 元素沿X轴倾斜 45 度：

 

skewY() 方法使元素沿 Y 轴倾斜给定角度。

下例把 <div> 元素沿 Y 轴倾斜 45 度：

 

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

下面的例子使 <div> 元素沿 X 轴倾斜 30 度，同时沿 Y 轴倾斜 40 度：

 

matrix() 方法把所有 2D 变换方法组合为一个。

此方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素，参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())。