html中的2D效果的实现

　　2D就是平时看到的平面，就是在屏幕上水平和垂直的交叉线X轴和Y轴

1：2D中的位移属性：

transform:translate(参数1，参数2)    单位为px

参数1：在X轴上移动的距离（正值为右移，负值为左移）

参数2：在Y轴上移动的距离（正值为下移，负值为上移）

也可单独设置XY轴，用transform:translateX(), transform:translateY()。

用之前效果：

用之后效果：

 

 

2: 2D中的旋转属性：

 transform:rotate(参数1，参数2)    单位为deg

参数1：在X轴上移动的距离（正值为右移，负值为左移）

参数2：在Y轴上移动的距离（正值为下移，负值为上移）

也可单独设置XY轴，用transform:rotateX(), transform:rotateY()。

用之前同图一。

用之后效果如下：

3： 2D中的缩放属性：

transform:scale(参数1，参数2)    无单位

参数1：水平上的缩小放大。

参数2：垂直上的缩小放大。

也可单独设置XY轴，用transform:scaleX(), transform:scaleY()。

参数在0~0.9999中为缩小，大于1为放大。

用之前同图一。

放大之后效果如下：

 

 4: 2D中的倾斜属性：

transform:skew(参数1，参数2)    单位deg

参数1：水平上的缩小放大。

参数2：垂直上的缩小放大。

也可单独设置XY轴，用transform:skewX(), transform:skewY()。

用之前同图一。

倾斜之后效果如下：