2D 转换

1.转换

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

转换（transform）可以简单理解为变形。

移动：translate

旋转：rotate

缩放：scale

1.1 二维坐标系

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

1.2 2D 转换之移动 translate

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

语法

transform: translate(x,y);或者分开写

transform: translateX(n);

transform: translateY(n);

重点

（1）定义2D转换中的移动，沿着X和Y轴移动元素。

（2）translate最大的优点：不会影响到其他元素的位置。

（3）translate中的百分比单位是相对于自身元素的translate: (50%,50%);

（4）对行内标签没有效果。

1.3 2D转换之旋转 rotate

2D转换指的是让元素在二维平面内顺时针旋转或者逆时针旋转。

语法

transform: rotate(度数)

重点

（1）rotate里面跟度数，单位是deg。

（2）角度为正时，顺时针，负时，为逆时针。

（3）默认旋转的中心点是元素的中心点。

1.4 2D转换中心点 transform-origin

设置转换点为中心点。

语法

transform-origin: x y;

重点

（1）注意后面的参数x和y用空格隔开。

（2）x y默认转换的中心点是元素的中心点(50% 50%)。

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

1.5 2D转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法

transform: scale(x,y);

注意

（1）注意其中的x和y用逗号分隔。

（2）transform: scale(1,1)：宽和高都放大一倍，相对于没有放大。

（3）transform: scale(2,2)：宽和高都放大两倍。

（4）transform: scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)。

（5）transform: scale(0.5,0.5)：缩小。

（6）scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，则不影响其他盒子。

1.6 2D转换综合写法

注意：

1. 同时使用多个转换，其格式为：transform: translate()rotate()scale()…等。

2. 其顺序会影响转换效果。（先选转会改变坐标轴方向）。

3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前面。

• 还没有人评论，欢迎说说您的想法！