使用CSS和HTML实现3D图片环绕效果

在本篇博客中，将介绍如何使用HTML和CSS实现一个3D图片环绕效果。这个效果不仅具有视觉吸引力，而且具有高度的互动性，鼠标悬停时动画会暂停。接下来将一步步讲解这个效果的实现过程。

1. 效果

在这里插入图片描述

2. 页面结构与布局

首先，我们来看一下HTML的基本结构。该效果的核心是一个<section>元素，它包含了多个图片的<div>，每个div中都设置了不同的背景图片。

HTML代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D图片环绕效果</title>
</head>
<body><section><div style="background-image:url(https://www.toopic.cn/public/uploads/small/1658044412448165804441259.jpg)"></div><div style="background-image: url(https://www.toopic.cn/public/uploads/small/1658044416540165804441665.jpg);"></div><div style="background-image: url(https://www.toopic.cn/public/uploads/small/170429677313517042967732.jpg);"></div><div style="background-image:url(https://www.toopic.cn/public/uploads/small/1638860413795163886041313.jpg)"></div><div style="background-image: url(https://www.toopic.cn/public/uploads/small/1658043148532165804314881.jpg);"></div><div style="background-image:url(https://www.toopic.cn/public/uploads/small/1638860379965163886037984.jpg)"></div></section>
</body>
</html>

说明：

<section>: 作为容器，用来包裹所有的图片元素。
<div>: 每个div通过内联样式设置背景图片，这些图片将最终展示在3D环绕效果中。

3. CSS样式

接下来，我们为这个页面添加样式，主要是通过CSS3中的transform、animation和perspective属性来实现3D旋转效果。

CSS代码：

* {margin: 0;padding: 0;
}body {display: flex;justify-content: center;align-items: center;height: 100vh;/* 设置透视点 */perspective: 1000px;
}/* 定义绕Y轴转动的动画 */
@keyframes RotateY {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}
}section {position: relative;display: flex;justify-content: center;align-items: center;width: 350px;height: 250px;background-image: url(../../images/小胖子1.jpg);background-size: cover;/* 让元素维持3D结构 */transform-style: preserve-3d;/* 调用绕Y轴旋转的动画 */animation: RotateY 20s linear infinite;
}section div {position: absolute;width: 350px;height: 250px;background-position: center;background-size: cover;border-radius: 15px;
}div:nth-child(1) {transform: translateZ(400px);
}div:nth-child(2) {transform: rotateY(60deg) translateZ(400px);
}div:nth-child(3) {transform: rotateY(120deg) translateZ(400px);
}div:nth-child(4) {transform: rotateY(180deg) translateZ(400px);
}div:nth-child(5) {transform: rotateY(240deg) translateZ(400px);
}div:nth-child(6) {transform: rotateY(300deg) translateZ(400px);
}/* 鼠标悬浮时，动画暂停 */
section:hover {animation-play-state: paused;
}

说明：

全局样式：
- * { margin: 0; padding: 0; }: 清除默认的内外边距，确保布局的整洁。
- body { display: flex; justify-content: center; align-items: center; height: 100vh; }: 使用flex布局，将图片环绕效果居中显示，并设置100vh让整个页面充满视窗。
透视效果（perspective）：
- perspective: 1000px; 设置透视点，创造3D深度效果。这决定了用户观察3D场景的距离，值越大，透视效果越弱；值越小，透视感越强。
3D旋转动画：
- @keyframes RotateY: 这是一个绕Y轴旋转的动画，旋转周期为0%到100%，完成一圈360度的旋转。
- animation: RotateY 20s linear infinite;: 给section应用动画，20秒旋转一圈，匀速且无限循环。
3D效果：
- transform-style: preserve-3d;: 保持3D空间效果，确保元素在旋转过程中不会失去深度感。
- translateZ(400px);: 将每个div向前移动400px，使它们在3D空间中看起来不在同一平面上。
- rotateY(60deg), rotateY(120deg), 等：给每个div设置不同的Y轴旋转角度，使它们在环绕中均匀分布。
交互效果：
- section:hover { animation-play-state: paused; }: 当鼠标悬浮在section上时，动画会暂停，用户可以细细观赏每一张图片。