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

news2024/11/23 10:30:30

使用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上时，动画会暂停，用户可以细细观赏每一张图片。