CSS 3d transformation nullifies hover effect for children elements
--rx and --ry are set dynamically with JS based on the mouse position relative to the container.
This is the CSS for the container.
--rx: 0;
--ry: 0;
transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));
transform-style: preserve-3d;
This is the CSS for an image inside the container.
.carouselImg:hover {
transform-origin: center center;
transform: perspective(none) scale(1.3);
}
When removing the dynamic setting of --rx and --ry (and giving them a default value like 30deg) the hover effect works.
Can somebody help me understand this?
1 Reply
are you setting the custom properties in JS including the 'deg' unit?
Otherwise, please provide a working example on codepen (including the js part)