transform、transition方法详解及scale、zoom差异性说明

CSS3变形处理

transform 可以对文字或图像的旋转、缩放、倾斜、移动进行变形处理。基准点为元素的中心点，可以通过transform-origin 修改基准点，如 transform-origin: left bootom;

旋转

使用rotate方法来实现文字或图像的旋转处理，在参数中指定旋转角度。

/*顺时针旋转30°*/
transform: rotate(30deg);

缩放

使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。

/*水平方向、垂直方向缩小一半*/
transform: scale(0.5);
/*水平方向缩小一半、垂直方向放大一倍*/
transform: scale(0.5, 2);

倾斜

使用skew方法来实现文字或图像的倾斜处理，在参数中分布指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

/*水平方向、垂直方向倾斜30°*/
transform: skew(30deg, 30deg);
/*只在水平方向倾斜30°*/
transform: skew(30deg);

移动

使用translate方法来实现文字或图像的移动处理，在参数中分布指定水平方向上的移动距离与垂直方向上的移动距离。

/*水平方向、垂直方向移动50px*/
transform: translate(50px, 50px);
/*只在水平方向移动50px*/
transform: translate(50px);

CSS3动画过渡

Transitions 将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。

transition: property duration timing-function delay;
/*也可以单独书写*/
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: transition-delay;

• property：表示对哪个属性进行平滑过渡
• duration：表示在多久时间内完成属性值的平滑过渡
• timing-function：表示通过什么方法进行平滑过渡，缓动函数
• delay： 表示指定变换动画特效延迟多久后才开始执行（当触发特效后，经过delay属性指定的延迟时间后才真正开始执行特效，单位秒或者毫秒）

支持多个属性

background-color: #ff0;
color: #000;
width: 300px;
transition: background-color 1s linear, color 2s linear, width 3s linear;

scale和zoom区别

• zoom的缩放是相对于左上角的；而scale默认是居中缩放，可以通过transform-origin修改基准点
• zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化（下面重点提及）
• 对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸
• 兼容性问题。firefox下不支持zoom；scale针对IE9+

占据空间大小

页面容器默认3840px * 2160px，通过监听onresize来动态控制缩放比例（这通常在大屏展示情况要使用），1920 < 当前尺寸< 2880时缩放0.75，<=1920时缩放0.5。

<style>
  .container {
    width: 3840px;
    height: 2160px;
    background-color: #0b97c4;
  }

  .scale-three-quarters {
    -weikit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
  }

  .scale-half {
    -weikit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
  }
</style>
<div class="container"></div>

/**
 * 动态改变缩放比例
 */
function changeScale() {
  var containerDom = document.querySelector('.container');
  if (window.outerWidth <= 1920) {
    containerDom.classList.remove('scale-three-quarters');
    containerDom.classList.add('scale-half');
  } else if (window.outerWidth > 1920 && window.outerWidth < 2880) {
    containerDom.classList.remove('scale-half');
    containerDom.classList.add('scale-three-quarters');
  }
}
// 进入页面时，进行动态判断控制
changeScale();
// 改变页面大小时，进行动态判断控制
window.onresize = changeScale;

如在分辨率下1920 * 1080会缩放0.5，截图效果如下（注意，竖向滚动条；横向缩放了，实际尺寸为1920px；纵向不会缩放，实际尺寸仍然为3840px）

Chrome浏览器下，可以通过设置html和body设置宽度、高度进行控制。

html, body {
  width: 100%;
  height: 100%;
}

但是，在Firefox下，上述设置不会起到任何效果。可以通过下述两种方式进行控制！
方案一：通过overflow:hidden来强制覆盖超出内容，只查看当前屏幕内容。缺点，超出的内容无法查看！

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

方案二：通过动态计算高度和宽度赋值给cotanier外层容器然后给外层容器设置overflow:hidden，来控制展示

<div style="height: 1080px; width: 1920px; overflow: hidden;">
  <div class="container"></div>
</div>

上述height和width可以通过动态计算获取，然后赋值给DOM元素！完美解决！