使用CSS和HTML实现3D图片环绕效果
使用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上时，动画会暂停，用户可以细细观赏每一张图片。
4. 总结
通过本文的介绍，我们实现了一个具有3D效果的图片环绕旋转动画。整个过程主要依赖于CSS3的transform、perspective、keyframes等属性，简单易懂但视觉效果非常出彩。
你可以根据自己的需求调整旋转速度、图片的数量、环绕的半径等，从而创造出更多样化的3D视觉体验。如果你想让你的网页更加生动有趣，这种3D环绕动画效果无疑是一个很好的选择。
原文地址：https://blog.csdn.net/2301_79858914/article/details/142893597
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！