【transform】--------------处理图像缩放后原点计算-------------【劉】

transform-origin: 100px 1000px;
transform: scale(1) translate(0px,0px) rotate(0deg);

一、缩放之前图形大小，宽300，高300

 

 

二、以原点transform-origin(100,100)进行缩放scale(1.5)

transform-origin: 100px 100px;
transform: scale(1.5) translate(0px,0px) rotate(0deg);

 

三、这时改变原点为transform-origin(30,30)则图形变换位置如下

 

 

 

 四、则要回到上次原点变化之前的位置，保证已新的原点进行缩放

  var animation = {
  　　sPosX:"0",
  　　sPosY:"0"
  }
  var scale = 1.5;
  //再次点击的新的原点
  var origin = {
  　　x:"30",
  　　y:"30"
  }
  //上一次的原点
  var sOrigin = {
  　　x:"100",
  　　y:"100"
  }
  animation.sPosX += (scale - 1) / scale * (origin.x - sOrigin.x) 
  animation.sPosY += (scale - 1) / scale * (origin.y - sOrigin.y) 

 

转载于:https://www.cnblogs.com/lstcon/p/10656676.html