Как игнорировать 3D-преобразование и получить реальный центр элемента? - PullRequest
Новая
       17

Как игнорировать 3D-преобразование и получить реальный центр элемента?

0 голосов
/ 12 марта 2019

Я хочу смоделировать вращение дочерних элементов вокруг трехмерного круга при использовании прокрутки родительского элемента div.Логика, которую я использовал, заключается в том, чтобы вычислить расстояние между центром родителя и потомка, а затем вычислить, на сколько градусов должен вращаться элемент вокруг оси Y.

Это то, что я пробовал до сих пор, но кажется, что получение центра Children элементов не возвращает реальное значение, потому что они имеют эффект перспективы.Как я должен получить настоящий центр детей, игнорируя эффект перспективы.Вы можете заметить, что правые элементы деформируются быстрее, чем левые: 

function getCenter(element) {
    let x = element.offset().left + element.outerWidth()/2;
    return x;
}

$(document).ready(function(){
	
	$(".wrapper").scroll(function(){
		var totalWidth=$(this).width();
		var holder=$(this);
		var d;
		$(this).find(".child").each(function(){
			d=-1* (getCenter($(this))-getCenter(holder));
			$(this).css({"transform": "rotateY("+ d*120/totalWidth +"deg)"});
			
			if (d<0){
				$(this).css({"transform-origin": "0 0"});
			}
			else{
				$(this).css({"transform-origin": "100% 0"});
			}
		})
	})
})
.wrapper{
  width:100%;
  overflow-x:scroll;
  height:100px;
  white-space:nowrap;
  height:140px;
 }
 
 .child{
  width:45%;
  background:url('https://bersoft.com/bimagem/help/chessboardsmall.jpg');
  border:5px solid #ff8800;
  margin-right:10px;
  height:100px;
  display:inline-block;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
...