CSS3技巧37：JS+CSS3 制作旋转图片墙
以下是一个使用JavaScript和CSS3制作旋转图片墙的简单示例：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Image Wall</title>
<style>
.container {
perspective: 1000px;
}
.image-wall {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
.image-wall img {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="image-wall">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
<img src="image6.jpg">
</div>
</div>
<script>
const imageWall = document.querySelector('.image-wall');
const images = Array.from(document.querySelectorAll('img'));
function cloneImages() {
images.forEach((img, index) => {
const clone = img.cloneNode();
clone.style.position = 'absolute';
clone.style.zIndex = images.length - index;
imageWall.appendChild(clone);
});
}
function calculateRotation() {
const angle = 360 / images.length;
images.forEach((img, index) => {
img.style.transform = `rotateY(${angle * index}deg) translateZ(200px)`;
});
}
cloneImages();
calculateRotation();
</script>
</body>
</html>在这个示例中，我们创建了一个包含6张图片的图片墙，通过CSS3的3D转换和动画来实现它们的旋转。JavaScript用于克隆图片并计算每个图片的旋转角度。注意，为了使旋转更加真实，每个图片需要是一个独立的元素，这样它们才能独立地旋转。
评论已关闭