Ich finde kann man bestimmt mal brauchen
Bilder von der KI gemacht
https://niederastroth.de/speisekarte/test.html
Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D Test</title>
<style>
body {
background: #111;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: white;
font-family: Arial;
}
#ad {
width: 350px;
height: 600px;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
background: #222;
border-radius: 20px;
overflow: hidden;
}
.layer {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
pointer-events: none;
}
.bg {
background: radial-gradient(circle, #009966, #003320);
transform: translateZ(-40px) scale(1.2);
}
.fg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transform: translateZ(40px);
}
.cta {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateZ(80px);
padding: 15px 30px;
background: #ff0;
border-radius: 10px;
color: #000;
font-weight: bold;
font-size: 24px;
}
</style>
</head>
<body>
<div id="ad">
<img src="neon.png" class="layer bg">
<img src="figure.png" class="layer fg">
</div>
<script>
const ad = document.getElementById("ad");
ad.addEventListener("mousemove", (e) => {
const rect = ad.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
// Hauptkippung
ad.style.transform = `
rotateY(${x * 25}deg)
rotateX(${y * -25}deg)
`;
// Parallax
document.querySelector('.bg').style.transform =
`translateZ(-40px) scale(1.2) translateX(${x * 40}px) translateY(${y * 40}px)`;
document.querySelector('.fg').style.transform =
`translateZ(40px) translateX(${x * -20}px) translateY(${y * -20}px)`;
document.querySelector('.cta').style.transform =
`translateX(-50%) translateZ(80px) translateX(${x * -30}px) translateY(${y * 30}px)`;
});
</script>
</body>
</html>