基本上我有一个使用parallax.js库的视差场景。
在场景中我有几个具有独特视差设置数据标签的div。在其中一个div中，我有一个我想要的元素应用倾斜效果（当它被鼠标移动时）。但是它不起作用，如果一个元素在场景内部，则不会应用来自倾斜lib的变换，但是如果我将它移出视差场景则它可以工作。
我认为问题在于OnMouseMove事件的管理，或者它可能无法以这种方式工作（当变换被应用于已经变换的元素的子元素时）。
Chrome EventListeners选项卡显示存在视差和倾斜mousemove侦听器。
我将不胜感激任何帮助。如果你需要任何代码片段，我可以提供它，因为现在我实际上不知道要显示什么特定部分，不想复制粘贴整个库。
UPD。这是我试图做的一个片段：
$(document).ready(function() {
var scene = $('.prlx-scene').get(0);
var parallaxInstance = new Parallax(scene, {
relativeInput: true,
invertX: false,
invertY: false
});
});.fulld,
.prlx-scene {
position: relative;
height: 100%
}
.prlx-scene {
width: 80%;
margin-right: auto;
margin-left: auto
}
.fulld {
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 12;
display: block;
width: 100%;
background-color: #000fff;
background-position: 50% 50%;
background-size: cover
}
.platonic-left-front-img {
position: absolute;
display: block;
}
.platonic-left-front {
z-index: 40;
}
.platonic-left-front-img {
left: 20%;
max-width: 100%;
max-height: 100%;
width: 50%;
top: 40%
}
.pc-text1 {
top: 50%;
left: 10%;
display: block;
position: fixed;
width: 15%;
height: 15%;
background-color: #00ffff;
}
.pc-text {
top: 50%;
left: 30%;
display: block;
position: fixed;
width: 15%;
height: 15%;
background-color: #00ffff;
}
img {
max-width: 100%;
vertical-align: middle
}
.scene-block {
width: 100%;
top: 0;
left: 0;
right: 0;
height: 100%;
bottom: 0;
margin-top: 0
}<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
</head>
<body style="height:100%;position:absolute;width:100%;">
<div class="pc-text1" data-tilt data-tilt-max="40" data-tilt-speed="200" data-tilt-perspective="500" data-tilt-reverse="true" style="z-index:9999;transform-style: preserve-3d;">
<p style="transform: translateZ(50px);">TEXT</p>
</div>
<div class="fulld">
<div class="prlx-scene">
<div class="scene-block" data-depth="0.8"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="platonic-left-front-img"></div>
<div class="scene-block" data-depth="0.85">
<div class="pc-text" data-tilt data-tilt-max="90" data-tilt-speed="400" data-tilt-perspective="500" data-tilt-reverse="true" style="transform-style: preserve-3d;">
<p style="transform: translateZ(50px);">TEXT</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vanilla-tilt.min.js"></script>
</body>发现视差场景禁用了指针事件。
因此，为了使其工作，我需要将style="pointer-events: all;"添加到正在倾斜的元素中。