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

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

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

1. 效果

2. 页面结构与布局

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

HTML代码:

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中的transformanimationperspective属性来实现3D旋转效果。

CSS代码:

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;
}

说明:

  1. 全局样式

    • * { margin: 0; padding: 0; }: 清除默认的内外边距,确保布局的整洁。
    • body { display: flex; justify-content: center; align-items: center; height: 100vh; }: 使用flex布局,将图片环绕效果居中显示,并设置100vh让整个页面充满视窗。
  2. 透视效果(perspective)

    • perspective: 1000px; 设置透视点,创造3D深度效果。这决定了用户观察3D场景的距离,值越大,透视效果越弱;值越小,透视感越强。
  3. 3D旋转动画

    • @keyframes RotateY: 这是一个绕Y轴旋转的动画,旋转周期为0%到100%,完成一圈360度的旋转。
    • animation: RotateY 20s linear infinite;: 给section应用动画,20秒旋转一圈,匀速且无限循环。
  4. 3D效果

    • transform-style: preserve-3d;: 保持3D空间效果,确保元素在旋转过程中不会失去深度感。
    • translateZ(400px);: 将每个div向前移动400px,使它们在3D空间中看起来不在同一平面上。
    • rotateY(60deg), rotateY(120deg), 等:给每个div设置不同的Y轴旋转角度,使它们在环绕中均匀分布。
  5. 交互效果

    • section:hover { animation-play-state: paused; }: 当鼠标悬浮在section上时,动画会暂停,用户可以细细观赏每一张图片。

4. 总结

通过本文的介绍,我们实现了一个具有3D效果的图片环绕旋转动画。整个过程主要依赖于CSS3transformperspectivekeyframes等属性,简单易懂但视觉效果非常出彩。

你可以根据自己的需求调整旋转速度、图片的数量、环绕的半径等,从而创造出更多样化的3D视觉体验。如果你想让你的网页更加生动有趣,这种3D环绕动画效果无疑是一个很好的选择。

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站