css3 transform的用处

1. transform-origin: x-axis y-axis z-axis
   • 作用：定义视图处在x,y,z哪个位置
2. 在可视化中自定义用哪种方式撑满屏幕

setBodyTransform = (zoomType, canvasSize) => {
  let radio = [1, 1];
  const rootPreview=document.querySelector('#rootPreview');
  switch (zoomType) {
    // 以宽度
    case 'width':
      radio[0] = radio[1] = document.documentElement.clientWidth / canvasSize.width;
      break;
      // 以高度
    case 'height':
      radio[0] = radio[1] = document.documentElement.clientHeight / canvasSize.height;
      rootPreview.style.marginLeft = (document.documentElement.clientWidth - canvasSize.width * radio[0]) / 2 + 'px';
      break;
      //全屏
    case 'full':
      radio[0] = document.documentElement.clientWidth / canvasSize.width;
      radio[1] = document.documentElement.clientHeight / canvasSize.height;
      break;
  }
  rootPreview.style.transform = `scale(${radio[0]},${radio[1]})`;
}

3.element.addEventListener(type,listener,boolean)

• 第二个参数不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

• 第三个参数默认冒泡：false,true:捕获 4.过渡动画文档，先插个眼 www.cnblogs.com/xiaohuochai…