image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
position: absolute;
transform-style: preserve-3d;
backface-visibility: visible;
}
.group3d {
perspective: 2000px;
transform-style: preserve-3d;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective-origin: 50% -1200px;
width: 50px;
height: 50px;
background-color: red;
border-radius: 100%;
}
</style>
<script>
const COUNT = 5;
const R = 400;
let angle = 0;
function onloadHandler() {
updateDisplay();
requestAnimationFrame(addAngle)
}
function addAngle() {
angle += 0.005;
updateDisplay();
requestAnimationFrame(addAngle)
}
function updateDisplay() {
for (let i = 0; i < COUNT; i++) {
updateElementPosition(i);
}
}
function updateElementPosition(index) {
const currentAngle = angle + (index * (Math.PI * 2)) / COUNT;
const x = R * Math.cos(currentAngle);
const z = R * Math.sin(currentAngle);
const element = document.getElementById(`i${index}`);
if (element) {
element.style.width = "100px";
element.style.zIndex = Math.floor(z);
element.style.opacity = Math.min(1, (z - -R) / 2 / R + 0.1);
element.style.transform = `translate3d(${x}px, 0, ${z}px)`;
}
}
</script>
</head>
<body onload="onloadHandler()">
<div class="group3d">
<img id="i0" src="./a.png" />
<img id="i1" src="./a.png" />
<img id="i2" src="./a.png" />
<img id="i3" src="./a.png" />
<img id="i4" src="./a.png" />
</div>
</body>
</html>
网友评论