CSS Scale и Transform вызывают наложения - PullRequest
Новая
       11

CSS Scale и Transform вызывают наложения

0 голосов
/ 10 января 2019

На HTML-странице я пытаюсь реализовать функцию масштабирования с помощью свойства масштаба CSS-преобразования. Внутри HTML-страницы у меня больше элементов div, и все они размещаются в технике абсолютного положения. Затем я применил свойство scale к каждому элементу div, и я смог увидеть подобное увеличение, но все точки расположения элементов div рухнули друг на друга. Так как избежать коллапса и сохранить разрыв между собой после примененного масштабирования.

Подскажите, пожалуйста, как остановить перекрытие и как рассчитать левую и верхнюю позиции каждого элемента в соответствии со свойством масштаба. 

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

1 Ответ

0 голосов
/ 11 января 2019

Вы можете добавить .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/>

Вы также можете проверить это здесь

...