我该如何镜像这个动画？

Question

我的屏幕左侧有一个面板，在激活时会翻转。当您移动鼠标时，它会略微改变rotateY转换以获得良好的交互效果。我想在屏幕的右侧对此进行镜像，但是我做的每一次调整都会导致面板在移动鼠标时发生变形。

需要对第二个jquery函数进行哪些调整以反映效果？我尝试了很多东西，包括用x = x + 15替换x = 360 - (x + 15)的当前代码。它很接近，但仍然不对。

＆＃13;

＆＃13;

$(document).on('mousemove','#viewport1 .menu',function( event ) {
		var x = Math.round(event.pageX / $(this).width() * 10);
		x = x + 15;
		$(this).css('transform','rotateY(' + x + 'deg)');
});


$(document).on('mousemove','#viewport2 .menu',function( event ) {
		var x = Math.round(event.pageX / $(this).width() * 10);
		x = 360 - (x + 15);  //this is almost but not quite right...
		$(this).css('transform','rotateY(' + x + 'deg)');
});

＆＃13;

.viewport {
    perspective: 1000px;
    position: absolute;
    top: 0; bottom:0; width: 30%;
    padding: 5px;
}
.menu {
    text-align: center;
    width: 100%;
    border: 1px solid black;
    display: inline-block;
    height: 100%;
}
#viewport1 {
    left: 0;
}
#viewport1 .menu {
    perspective-origin: left;
    transform-origin: left;
    transform: rotateY(15deg);
}

#viewport2 {
    text-align: right;
    right: 0;
}
#viewport2 .menu {
		perspective-origin: right;
		transform-origin: right;
		transform: rotateY(345deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewport1" class="viewport">
  <div class="menu">HOVER ME!</div>
</div>
<div id="viewport2" class="viewport">
  <div class="menu">HOVER ME!</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您正在使用event.pageX，这是鼠标指针相对于文档左边缘的位置，用于计算<div>的旋转。您需要减去左偏移：$(this).offset().left。之后，您将x+15更改为x-15并获得镜像效果。

$(document).on('mousemove','#viewport1 .menu',function( event ) {
	var x = Math.round(event.pageX / $(this).width() * 10);
  
	x = x + 15;
	$(this).css('transform','rotateY(' + x + 'deg)');
});


$(document).on('mousemove','#viewport2 .menu',function( event ) {
	var x = Math.round((event.pageX - $(this).offset().left) / $(this).width() * 10);
  
	x = x - 15;
	$(this).css('transform','rotateY(' + x + 'deg)');
});

.viewport {
  perspective: 1000px;
  position: absolute;
  top: 0; bottom:0; width: 30%;
  padding: 5px;
}
.menu {
  width: 100%;
  border: 1px solid black;
  display: inline-block;
  height: 100%;
}
#viewport1 {
  left: 0;
}
#viewport1 .menu {
		perspective-origin: left;
		transform-origin: left;
		transform: rotateY(15deg);
}

#viewport2 {
text-align: right;
  right: 0;
}
#viewport2 .menu {
		perspective-origin: right;
		transform-origin: right;
		transform: rotateY(345deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewport1" class="viewport">
  <div class="menu"></div>
</div>
<div id="viewport2" class="viewport">
  <div class="menu"></div>
</div>