3D照片墙实现

最新推荐文章于 2024-03-28 12:01:59 发布

快秃头的老阿姨

最新推荐文章于 2024-03-28 12:01:59 发布

阅读量399

点赞数

文章标签： 3d 前端 css

本文链接：https://blog.csdn.net/2201_75866478/article/details/134092882

版权

本文介绍了如何仅使用HTML和CSS技术，特别是transform和animate属性，以及perspective和transform-style:preserve-3d，来创建一个炫酷的3D照片墙效果。作者提供了详细的代码示例，展示了如何通过动画和视角调整实现立体视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

是不是感觉3D照片墙很炫酷？很好看？但是不会写！！！

其实很简单，仅仅只用到了html和css的知识

主要的知识是transform的知识点和animate的知识点，重点是transform-style: preserve-3d;

perspective: 3000px;

有兴趣的可以去瞧一下代码

perspective: 3000px;是调节视距

transform-style: preserve-3d;作用是实现3d效果，当我们画正方体等3d图的时候会用到

要是不用，我们看到的是2d效果

实现效果：

照片墙

话不多说，上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes rotate {
            0% {
                transform: rotateY(0deg);
            }

            100% {
                transform: rotateY(360deg);
            }
        }

        .circle-container {
            width: 300px;
            height: 400px;
            position: relative;
            margin: 0 auto;
            margin: 200px auto;
            position: relative;
            perspective: 3000px;

        }

        .circle {
            width: 300px;
            height: 400px;
            position: absolute;
            /* transform-style: preserve-3d; */
            animation: rotate 20s infinite linear;
            
            transform-style: preserve-3d;

        }

        .circle-container:hover .circle {
            animation-play-state: paused;
            cursor: pointer;
        }

        .circle img {
            width: 300px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
            margin: auto;
            object-fit: cover;

        }

        .circle img:nth-child(1) {
            transform: rotateY(0deg) translateZ(500px);
        }

        .circle img:nth-child(2) {
            transform: rotateY(45deg) translateZ(500px);
        }

        .circle img:nth-child(3) {
            transform: rotateY(90deg) translateZ(500px);
        }

        .circle img:nth-child(4) {
            transform: rotateY(135deg) translateZ(500px);
        }

        .circle img:nth-child(5) {
            transform: rotateY(180deg) translateZ(500px);
        }

        .circle img:nth-child(6) {
            transform: rotateY(225deg) translateZ(500px);
        }

        .circle img:nth-child(7) {
            transform: rotateY(270deg) translateZ(500px);
        }

        .circle img:nth-child(8) {
            transform: rotateY(315deg) translateZ(500px);
        }
    </style>
</head>

<body>
    <div class="circle-container">
        <div class="circle">
            <img src="./03课后作业/zye_img/003.jpg" alt="图片1">
            <img src="./03课后作业/zye_img/011.jpg" alt="图片2">
            <img src="./03课后作业/zye_img/010.jpg" alt="图片3">
            <img src="./03课后作业/zye_img/009.jpg" alt="图片4">
            <img src="./03课后作业/zye_img/007.jpg" alt="图片5">
            <img src="./03课后作业/zye_img/006.jpg" alt="图片6">
            <img src="./03课后作业/zye_img/005.jpg" alt="图片7">
            <img src="./03课后作业/zye_img/004.jpg" alt="图片8">
        </div>
    </div>
</body>

</html>