CSS3 2D 转换之缩放

CSS3 2D 转换之缩放

CSS3 2D转换

• 转换(transfrom)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
• 转换(transfrom)可以简单的理解为变形
  • 移动:translate
  • 旋转:rotate
  • 缩放:scale

CSS3 2D 转换之缩放scale

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

• 语法

  • transform:scale(x, y);

• 注意

  • 注意其中的x和y用逗号分隔
  • transform:scale(1, 1);宽高放大1倍，等于没有放大
  • transform:scale(2, 2);宽高放大2倍
  • transform:scale(2);只写一个参数，第二个参数则和第一个参数一样，相当于scale(2, 2)
  • transform:scale(0.5, 0.5)缩小到0.5倍
  • scale缩放最大的优势
    • 可以设置转换中心点缩放
    • 默认以中心点缩放
    • 不影响其它盒子