CSS3 2D转换（一）

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，可以简单理解为变形。

2D转换是改变标签在二维平面上的位置和形状的一种技术。

2D转换之移动（translate）：是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法：

      transform:translate(x,y);

      transform:translateX(n);

      transform:translateY(n);

【举例】写一个盒子：

使这个盒子同时沿x轴和y轴移动50px：            transform: translate(50px, 50px);

只沿x轴移动50px：transform: translateX(50px)；/（transform: translate(50px, 0);）

Y轴同理

Translate最大的优点：不会影响到其他元素的位置

Translate中的百分比单位是相对于自身元素的translate：（50%，50%）；

旋转（rotate）：指让元素在二维平面内顺时针旋转或逆时针旋转，默认旋转的中心点是元素的中心点。

语法：transform:rotate(度数)

*rotate里跟度数，单位是deg。角度为正时，顺时针，角度为负，则逆时针。

【举例】插入一张图片：

旋转25°后：

实现将鼠标放到图片上，图片自动旋转65°：