css2D转换

css里面的2D转换有什么效果呢？首先2D转换其实是

能够对元素进行移动、缩放、转动、拉长或拉伸，


js


里面很多简单的动画效果也是经过


2D


转换实现的，转换是使元素改变形状、尺寸和位置的一种效果。

那么到底有哪一些呢？首先我们来试一下我们常见的


transform


属性，

1


、

你们发现了吗？第二个div移动动距离原来的左上边移动了这是为什么呢？

没错第二个div我们给它增加了transform属性并且使用了translate（x，y）（平移）方法，是什么意思呢！translate（）方法从其当前位置移动元素（根据为X轴和Y轴指定的参数进行移动），比如设置了一个盒子把它包围在里面，通过transform属性一样可以把它从里面移动到其他地方去，而在他原来的地方就是作为原点，我们可以直接根据x轴和y轴来控制移动它。

2、

还有就是rotate（）方法，

第一个div我给它设置30度，rotate（30deg）的意思是朝着顺时针旋转30度，如果为负数那么就是朝着逆时针旋转30度。

第二个div就是顺时针60度。

3、scale（）方法，

首先从图片中我们就可以看出第二个div变大了，这次我们用了scale（）方法，你大概猜到了这是什么效果，没错这就是（缩放），意思就是通过scale（）方法增加或者减少元素的大小，前提是根据给定的宽度和高度来作为参数。括号里面scale（x，y）跟移动一样都是改变x轴或者y轴但是呢，这次的效果是放大或者缩小倍以1为原来的倍数，要放大几倍或者缩小几倍都可以用到scale（）方法，把宽度和高度都放大或者缩小都可以。

4、skewX（）方法和skewY（）方法，

从图片我们可以看出，skewY（）方法是使元素沿着Y轴倾斜，skewX（）方法则是沿着X轴倾斜，它们也可以单独使用！