2D 转换之 scale

1. scale 的作用

   用来控制元素的放大与缩小

2. 语法

   transform: scale(x, y)
   

3. 知识要点

   • 注意，x 与 y 之间使用逗号进行分隔
   • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
   • transform: scale(2, 2): 宽和高都放大了二倍
   • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
   • transform:scale(0.5, 0.5): 缩小
   • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

4. 代码演示

       div:hover {
           /* 注意，数字是倍数的含义，所以不需要加单位 */
           /* transform: scale(2, 2) */
   
           /* 实现等比缩放，同时修改宽与高 */
           /* transform: scale(2) */
   
           /* 小于 1 就等于缩放*/
           transform: scale(0.5, 0.5)
       }

 

转换综合写法以及顺序问题

1. 知识要点

   • 同时使用多个转换，其格式为 transform: translate() rotate() scale()
   • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
   • 但我们同时有位置或者其他属性的时候，要将位移放到最前面

2. 代码演示

   div:hover {
    transform: translate(200px, 0) rotate(360deg) scale(1.2)
   }