转换之2d

是什么：所谓转换就是对页面中的元素进行位移，旋转，缩放等一系列形态上的变化，也可以说它是一种元素的“变形”。当然它也是属于css3中的一种加工元素的方式，今天带你们了解一下其中的2d转换。

1.其实吧，2d个人感觉应该就是相当于一个平面。而网页很多元素都是在平面上进行编辑的。

2.移动（translate）

就是改变元素在页面上的位置。比如，你觉得你所编辑的网页中图片在左上角，但你觉得他应该在你所写的内容的右侧，相当于插画。这个时候你就可以用“移动”来进行操作。

语法：transform：translate(x,y)

你还可以分开写，像这样：

           transform：translateX(n)

           transform：translateY(n)

但注意：（1）：2d中的移动是沿着x，y轴移动的。（对比原图形，同时x，y的值可正可负）

              （2）：其次，它不会影响到其他元素的位置，不会存在把另外元素挤走，或者挤压的情况。

              （3）：当你用%单位来定位时，是相对于自己元素的本来正中间的点进行的。

              （4）；但他对行内标签没有效果（行内标签：与其他标签在同一行，但他不能设置宽度，高度，行高，以及距顶/底部距离）

3.旋转。

这个就很好理解了，比如说，你写的福字，你想给它到过来，就需要运用到旋转这一方式。

语法:transform ：rotate()[在这个小框框里是我们需要旋转的数值，但注意其角度符号是deg。

示例：<style>

.box{

posistion:absolute

width:50px

height:50px

transform:rotate<45deg>

}

</style>

这个时候你就会发现原来你所创造的小方形在页面上旋转了45度，一般情况下旋转是以元素中心为旋转点来进行旋转，所以当你在旋转时要注意在页面边上的元素哦，很可能会有些部分被你旋转出框。

4.转换中心点。

你会发现在转换中多次出现中心点，那中心点一定就固定吗？不，他可以进行改变这个时候就需要origin属性来操作。

语法：transform-origin：x  y；

但它有些地方注意：（1）；x，y参数中间是需要用空格来隔开的。

                                （2）：x，y默认转换的中心点是元素的中心点（50% 50%）

                                （3）：还可以给x，y设置像素或者方位名词（top bottom left right center）

5.缩放。

这个也很好理解，就是对你页面中的元素的大小进行改变，其中也可以只对元素的一个部分进行缩放。

语法：transform：scale（x，y）

注意：（1）：其中x，y用逗号来隔开。

           （2）：当你用transform：scale（a，a）跟transform：scale（a）效果是一样的

           （3）：其中大于1是指放大，小于1是指缩小。