CSS Scale 和 Transform 导致重叠

Question

在 HTML 页面中，我尝试使用 CSS 转换比例属性来实现缩放功能。在 HTML 页面中，我有更多的 div 元素，所有元素都使用绝对位置技术放置。然后我将 scale 属性应用于每个 div，我可以看到类似缩放，但所有 div 位置都相互折叠。那么如何在应用缩放后避免塌陷并保持彼此之间的间隙。

请建议我如何停止重叠以及如何根据 scale 属性计算每个元素的左侧和顶部位置。

var zoomScale = 1;

$(document).ready(function(){
  
  $("#zoomin").click(function(){
    if(zoomScale >=4 ) return;
    zoomScale = zoomScale +1;
    dispStatus();
    applyZoomIn();
  });

  function applyZoomIn(){
    $(".zoomable").each(function(index){
      var left = $(this).position().left;
      var top = $(this).position().top;
      var newLeft = left*zoomScale +"px";
      var newTop = top*zoomScale +"px";
      $(this).css('transform',' scale('+zoomScale+','+zoomScale+')')
    });
  }

  function dispStatus(){
    $("#displayStatus").text("Current Zoom Scale : "+zoomScale);
  }
  
  dispStatus();
  
});

#container{
     width:500px;
     height:500px;
     border:1px solid red;
     position:relative;
     overflow:auto;
}
.zoomable{
  background-color:lightblue;       
  border:1px solid red;
  width:100px;
  height:100px;
  position:absolute;
  transform-origin: top left;      
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button id="zoomin"> Zoom In</button>
<div id="displayStatus"></div>
<br/><br/>
<div id="container">
   <div class="zoomable">First Div</div>
   <div class="zoomable" style="left:105px">Second Div</div>
</div>

JSFiddle Link

Answer 1

您可以将.zoomable div 添加到另一个父级（称为.inner-container）并为其添加缩放功能。这样.container div 就不会被缩放，而可缩放的 div 将保持位置。

请看下面的片段：

var zoomScale = 1;
$(document).ready(function(){
	 $("#zoomin").click(function(){
    if(zoomScale >=4 ) return;
    zoomScale = zoomScale +1;
    dispStatus();
    applyZoomIn();
  });

  function applyZoomIn(){
      $(".inner-container").css('transform',' scale('+zoomScale+','+zoomScale+')');
  }

 
  function dispStatus(){
   $("#displayStatus").text("Current Zoom Scale : "+zoomScale);
  }

  dispStatus();

});

    
    .zoomable{
      background-color:lightblue;       
      width:100px;
      height:100px;
      position:absolute;
      border:1px solid red;
    }
    #container{
    width:500px;
    height:500px;
    border:1px solid red;
    position:relative;
    overflow:auto;
    }
    .inner-container{
      transform-origin: top left; 
    }
   

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="zoomin"> Zoom In</button>

<div id="displayStatus"></div>
<br/><br/>

<div id="container">
  <div class="inner-container">
    <div class="zoomable">First Div
    </div>
    <div class="zoomable" style="left:105px">Second Div
    </div>
  </div>
</div>
<br/><br/>

你也可以测试一下here