tilt.js将视差元素下推几个像素

Question

我正在做一个网页设计。在网页设计中，我有一个图像。我在rellax.js的帮助下给图像添加了视差效果。这是用rellax.js给图像添加视差效果的代码

现在，我想使用tilt.js为图像添加倾斜效果。现在当我将鼠标悬停在图像上时，图像被下推了几个像素。当我去除视差效应时，我不会遇到这个问题。

倾斜效果本身是有效的，但我不希望图像被向下推。

​

var rellax = new Rellax('.rellax');

.about_img {
  height: 600px;
  width: auto;
  float: left;
  border: 5px;
  border-radius: 20px;
  margin: 150px 150px 50px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 10px 10px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 10px 10px 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 10px 10px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/tilt.js@1.1.21/dest/tilt.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.10.0/rellax.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.10.0/rellax.min.js"></script>
<img src='images/about.jpg' alt="" class='about_img rellax' data-rellax-speed="2" data-tilt>

​

该问题的一种可能的解决方案是在悬停时添加负边距-top值，如下所示

img:hover{
  margin-top: -100px;
}

这种解决方案不是很优雅，结果也很不稳定。

为什么会出现此问题，可以采取哪些措施来解决此问题？

Answer 1

同样的问题，我通过使用父div和子div修复了这个问题，其中父div有Rellax效果，子div有倾斜效果，我知道这是一个变通办法，有人可能有更好的解决方案。

这里有一个我已经实现的想法的例子。

https://codepen.io/ndrs/pen/ExgQBqz

<div class="half rellax" data-rellax-speed="1"> <!-- has rellax -->
  <div class="inner-project"> <!-- has tilt -->
    <h3>Two</h3>
  </div>
</div>

Ps。我看到您在代码示例中导入了两次Rellax.js。只需根据您的需要使用其中一个即可。