HTML5 - 2D 转换之 scale

HTML5 -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)
      }