虚位以待,此位置招租
虚位以待,此位置招租
虚位以待,此位置招租
虚位以待,此位置招租
虚位以待,此位置招租
虚位以待,此位置招租
NexaHub聚合登录 阿里云服务器 99元/年 大流量卡 - 免开卡,免运费 172 - 大流量卡 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租
输入验证码,即可复制
扫描二维码输入:jiuge,即可获取验证码
只需要3秒时间
返回列表 发布新帖

[网站源码] HTML&CSS:超级酷炫的3D照片墙

46 0
发表于 2025-2-18 07:32:44 | 查看全部 阅读模式
这段代码创建了一个 3D 图片轮播效果,其中包含 8 张图片。图片在 3D 空间中围绕 Y 轴旋转,形成一个循环的轮播效果。CSS 的@keyframes 动画定义了图片的旋转路径,而 transform-style: preserve-3d 属性确保了 3D 效果的正确显示。每张图片通过不同的 rotateY 和 translateZ 属性定位在 3D 空间中的不同位置。

演示效果

be217adf04af4c509bdf18914b7c9425.gif


CSS部分显示
    .container {
        position: relative;
        margin-top: 50px;
    }

    .stage {
        position: relative;
        width: 800px;
        height: 240px;
        margin: 20px auto;
        perspective: 2000px;
        transform-style: preserve-3d;
        -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(239, 179, 213, 0.8));
    }
    .stage .control {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: translateZ(-2000px) rotateY(50deg) rotateZ(0deg);
        animation: rotate 30s linear infinite;
    }

    .stage .control .imgWrap {
        position: absolute;
        width: 400px;
        height: 400px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform-style: preserve-3d;
    }

    .stage .control .imgWrap .img {
        position: absolute;
        width: 500px;
        height: 400px;
        line-height: 400px;
        text-align: center;
        font-size: 120px;
        top: 0;
        left: 0;
        object-fit: cover;
        transform-style: preserve-3d;
        transform-origin: 50% 50% 0px;
    }
HTML部分显示
    <div class="container">
        <div class="stage">
            <div class="control">
                <div class="imgWrap">
                    <div class="img img1">
                        <img src="./img/p1.jpg" />
                    </div>
                    <div class="img img2">
                        <img src="./img/p2.jpg" />
                    </div>
                    <div class="img img3">
                        <img src="./img/p3.jpg" />
                    </div>
                    <div class="img img4">
                        <img src="./img/p4.jpg" />
                    </div>
                    <div class="img img5">
                        <img src="./img/p5.jpg" />
                    </div>
                    <div class="img img6">
                        <img src="./img/p6.jpg" />
                    </div>
                    <div class="img img7">
                        <img src="./img/p7.png" />
                    </div>
                    <div class="img img8">
                        <img src="./img/p8.png" />
                    </div>
                </div>
            </div>
        </div>
    </div>
HTML 结构

container:主容器,用于居中显示舞台(stage)。
stage:舞台,用于创建 3D 效果的容器。
control:控制容器,包含所有图片,并在 3D 空间中旋转。
imgWrap:图片包装器,用于包含所有图片元素。
img img1 至 img img8:每个类名为 img 的 div 元素包含一个图片,并通过不同的 imgX 类来区分和定位。

CSS 样式

body:设置页面的显示方式、外边距和背景色。
.container:设置容器的位置和外边距。
.stage:设置舞台的尺寸、位置、透视和 3D 样式。
.stage .control:设置控制容器的尺寸、3D 样式和动画。
.stage .control .imgWrap:设置图片包装器的位置和 3D 样式。
.stage .control .imgWrap .img:设置图片的尺寸、位置和 3D 样式。
.stage .control .imgWrap img:设置图片的尺寸和圆角。
.stage .control .imgWrap .img1 至.stage .control .imgWrap .img8:为每张图片设置不同的 3D 旋转和位置。
@keyframes rotate:定义一个关键帧动画,用于控制图片轮播的旋转效果。

完整代码下载


夸克网盘UC网盘

免责声明

本社区仅提供信息交流平台,帖子内容由用户自行发布,不代表社区立场。用户对发布内容负全责,包括版权、隐私、诽谤等,社区不承担因使用社区内容导致的损失。禁止发布侵权、隐私信息,发现侵权请联系我们。社区不负责第三方内容,用户因访问第三方内容产生的损失,社区不担责。用户须遵守规则和法律,不得发布违法、不当内容,违规内容将被删除。发表帖子即同意本声明,不同意请勿发帖。


特别提醒:网络空间并非法外之地,请广大用户自觉遵守法律法规,共同营造健康、文明、有序的网络环境。

本社区运营团队

联系我们: 如有疑问或发现违规行为,请联系管理员:kefu@foxccs.com

远方路灯明灭,银河倾斜,一斛星斗洒满天街。

回复

快捷回复: 经历想经历的,成为想成为的 - 九歌社区
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

投诉/建议联系

jiubbs2025@163.com

未经授权禁止转载,复制和建立镜像,
如有违反,追究法律责任
  • QQ交流群
  • 微信公众号
Copyright © 2001-2025 九歌社区 版权所有 All Rights Reserved.

手机版|小黑屋|帮助|九歌社区   |   GMT+8, 2025-4-2 19:43 , Processed in 0.253012 second(s), 37 queries .

关灯 在本版发帖
扫一扫添加微信客服
手机扫一扫访问
返回顶部
快速回复 返回顶部 返回列表