添加3D悬停效果的图像与自定义CSS?

Question

尝试在图像上悬停时实现此效果，可以仅使用CSS实现吗?

https://mansun.co.uk/music/

提前感谢!

}
.product_med img:hover {
-webkit-transform: rotate(360deg);
transform: rotate3d(3, 3, 1, 360deg);
-webkit-transform-style: preserve-3d;
}
.product_med img {
border-radius: 50%;
transition: all 0.4s cubic-bezier(0.12,0.65,0.4,1);
-webkit-transition: all 2.27s ease-out;
}

Answer 1

要创建这种倾斜的3D效果，您可能需要使用转换和透视图。
鼠标倾斜不能单独使用CSS解决，使用JavaScript:

const element = document.querySelector('.pane');
const tiltDeg = 15;
element.addEventListener('mousemove', ({
clientX,
clientY
}) => {
const bcr = element.getBoundingClientRect();
const rotX = ((clientY - bcr.top) / bcr.height * 2 - 1) * tiltDeg;
const rotY = ((clientX - bcr.left) / bcr.width * 2 - 1) * -tiltDeg;
element.firstElementChild.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
});
element.addEventListener('mouseleave', () => {
element.firstElementChild.style.transform = `rotateX(0deg) rotateY(0deg)`;
});

* {
margin: 0;
box-sizing: border-box;
}
.pane {
width: 200px;
height: 200px;
left: 50px;
top: 50px;
position: relative;
perspective: 600px;
}
.pane-tilt {
position: relative;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: 0.1s;
display: flex;
transform-style: preserve-3d;
}
.pane-tilt-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pane-tilt-desc {
position: relative;
margin: auto;
color: #fff;
transition: 0.3s;
transform: translateZ(0px);
scale: 0.6;
opacity: 0;
}
.pane:hover .pane-tilt-desc {
transform: translateZ(60px);
scale: 1;
opacity: 1;
}

<div class="pane">
<div class="pane-tilt">
<img class="pane-tilt-image" src="https://placekitten.com/300/287">
<h3 class="pane-tilt-desc">Lorem ipsum</h3>
</div>
</div>