HTML+CSS中的2D转换之translate rotate scale

2D移动translate

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

语法

{
transform: translate(x, y); /*x,y分别表示x轴和y轴移动的距离*/
}
/*或者分开写*/
{
    transform: translateX(n);
    transform: translateY(n);
}

特点

• 定义2D转换中的移动，沿着X和Y轴移动元素
• translate最大优点：不会影响其他元素的位置
• translate中的百分比单位是相对于自身元素的translat(50%,50%）
• 对行内标签没有效果

2D旋转rotate

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

语法

{
    transform: rotate(度数);
}

特点

• rotate里面跟度数，单位是：deg，例如： rotate(45deg)
• 度数为正数时顺时针旋转，为负数时逆时针旋转
• 默认旋转的中心点是元素的中心点

案例

利用div+css制作下拉框小三角

2D转换中心点transform-origin

元素转换默认是以元素的宽和高的50%作为中心点，我们可以手动设置元素转换的中心点

语法

{
    transform-origin: x y;
}

特点

• 后面的参数x和y是用空格隔开
• x y默认转换的中心点是元素的中心点（50% 50%）
• 还可以给x和y设置像素或者方位名词（top bottom left right center）

案例

当鼠标悬浮到div上时，div以左下角为旋转中心旋转360度

2D转换缩放scale

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

语法

{
    transform: scale(x, y);
}

特点

 

• 参数x和y以逗号分隔
• 参数x和y没有单位，而是放大或缩小宽度和高度的倍数
• transform:scale(1,1)宽和高放大一倍，相当于没放大
• transform:scale(2,2)宽和高放大2倍
• transform:scale(2)：只写一个参数时，第二个参数默认跟第一个参数一样，相当于transform:scale(2,2)
• transform:scale(0.5,0.5)宽和高缩小0.5倍
• scale缩放的最大优势：可以设置缩放的中心点，默认以中心点缩放，而且不会影响其它盒子。

案例

2D转换综合写法

综合写法即上面的一个或多个方法可以同时使用

用法与特点

• 同时使用多个转换，格式为: transform: translate(x,y) rotate(Xdeg) scale(x,y) ...
• 多个转换中间以空格分隔
• 方法的顺序会影响转换的效果。（如果先旋转则会影响坐标轴的方向）
• 当同时有位移和其它属性的时候，记得要将位移放在最前面

示例代码