css实现3d照片墙

  • 开发
  • 22

效果图 

vue2写法： 

<template>
    <div class="container">
        <div class="box">
            <div class="circle circle1">
                <img src="../../../assets/images/main/logo.png" alt="" />
            </div>
            <div class="circle circle2">
                <img src="../../../assets/images/main/logo.png" alt="" />
            </div>
            <div class="circle circle3">
                <img src="../../../assets/images/main/logo.png" alt="" />
            </div>
            <div class="circle circle4">
                <img src="../../../assets/images/main/logo.png" alt="" />
            </div>
            <div class="circle circle5">
                <img src="../../../assets/images/main/logo.png" alt="" />
            </div>
            <div class="circle circle6">
                <img src="../../../assets/images/main/logo.png" alt="" />
            </div>
            <div class="circle circle7">
                <img src="../../../assets/images/main/logo.png" alt="" />
            </div>
            <div class="circle circle8">
                <img src="../../../assets/images/main/logo.png" alt="" />
            </div>
            <div class="circle circle9">
                <img src="../../../assets/images/main/logo.png" alt="" />
            </div>
            <div class="circle circle10">
                <img src="../../../assets/images/main/logo.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script></script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置可视窗口的宽高 */
body {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-color: pink;
}

.container {
    position: absolute;
    width: 1000px;
    height: 500px;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.box {
    width: 150px;
    height: 150px;
    position: relative;
    transform-style: preserve-3d;
    animation: run 10s linear infinite;
}

.circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
}

/*设置图像大小、边框、圆角、位置*/
.circle img {
    width: 200px;
    height: 150px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
}

.circle1 {
    transform: translateZ(500px);
}

.circle2 {
    transform: rotateY(36deg) translateZ(500px);
}

.circle3 {
    transform: rotateY(72deg) translateZ(500px);
}

.circle4 {
    transform: rotateY(108deg) translateZ(500px);
}

.circle5 {
    transform: rotateY(144deg) translateZ(500px);
}

.circle6 {
    transform: rotateY(180deg) translateZ(500px);
}

.circle7 {
    transform: rotateY(216deg) translateZ(500px);
}

.circle8 {
    transform: rotateY(252deg) translateZ(500px);
}

.circle9 {
    transform: rotateY(288deg) translateZ(500px);
}

.circle10 {
    transform: rotateY(324deg) translateZ(500px);
}

@keyframes run {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}
</style>

html写法：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画2</title>
</head>
 
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        /* 设置可视窗口的宽高 */
        body {
            width: 100vw;
            height: 100vh;
            position: relative;
            background-color: pink;
        }
 
        .container {
            position: absolute;
            width: 1000px;
            height: 500px;
            top: 15%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
        }
 
        .box {
            width: 150px;
            height: 150px;
            position: relative;
            transform-style: preserve-3d;
            animation: run 10s linear infinite;
        }
 
        .circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
        }
 
        /*设置图像大小、边框、圆角、位置*/
        .circle img {
            width: 200px;
            height: 150px;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-sizing: border-box;
        }
 
        .circle1 {
            transform: translateZ(500px);
        }
 
        .circle2 {
            transform: rotateY(36deg) translateZ(500px);
        }
 
        .circle3 {
            transform: rotateY(72deg) translateZ(500px);
        }
 
        .circle4 {
            transform: rotateY(108deg) translateZ(500px);
        }
 
        .circle5 {
            transform: rotateY(144deg) translateZ(500px);
        }
 
        .circle6 {
            transform: rotateY(180deg) translateZ(500px);
        }
 
        .circle7 {
            transform: rotateY(216deg) translateZ(500px);
        }
 
        .circle8 {
            transform: rotateY(252deg) translateZ(500px);
        }
 
        .circle9 {
            transform: rotateY(288deg) translateZ(500px);
        }
 
        .circle10 {
            transform: rotateY(324deg) translateZ(500px);
        }
 
        @keyframes run {
            0% {
                transform: rotateY(0);
            }
 
            100% {
                transform: rotateY(360deg);
            }
        }
    </style>
 
    <body>
        <div class="container">
            <div class="box">
                <div class="circle circle1">
                    <img src="./img/QQ图片20221114190101.jpg" alt="">
                </div>
                <div class="circle circle2">
                    <img src="./img/QQ图片20221114190057.jpg" alt="">
                </div>
                <div class="circle circle3">
                    <img src="./img/QQ图片20221114190053.jpg" alt="">
                </div>
                <div class="circle circle4">
                    <img src="./img/QQ图片20221114190048.jpg" alt="">
                </div>
                <div class="circle circle5">
                    <img src="./img/QQ图片20221114190044.jpg" alt="">
                </div>
                <div class="circle circle6">
                    <img src="./img/QQ图片20221114190038.jpg" alt="">
                </div>
                <div class="circle circle7">
                    <img src="./img/QQ图片20221114190014.jpg" alt="">
                </div>
                <div class="circle circle8">
                    <img src="./img/QQ图片20221114190008.jpg" alt="">
                </div>
                <div class="circle circle9">
                    <img src="./img/QQ图片20221114190002.jpg" alt="">
                </div>
                <div class="circle circle10">
                    <img src="./img/QQ图片20221114185953.jpg" alt="">
                </div>
            </div>
        </div>
    </body>
</html>

阅读全部

相关推荐

  8. HTML/CSS实现3D翻转页面效果

    2024-07-11 12:30:03       54 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-11 12:30:03       53 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-11 12:30:03       56 阅读

  9. 在Django里面运行非项目文件

    2024-07-11 12:30:03       46 阅读

  19. Python语言-面向对象

    2024-07-11 12:30:03       57 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-07-11 12:30:03       51 阅读

热门阅读

  1. HDFS体系架构&文件写入/下载流程

    2024-07-11 12:30:03       22 阅读

  6. 企业微信群发限制的背后逻辑，一文读懂！

    2024-07-11 12:30:03       20 阅读

  7. Stable Diffusion与AI艺术：探索人工智能的创造力

    2024-07-11 12:30:03       23 阅读

  8. C语言程序设计核心详解 第一章:数制及转换与ASCII码

    2024-07-11 12:30:03       25 阅读

  10. vue3 ts 不使用 if switch 来决定使用什么函数

    2024-07-11 12:30:03       17 阅读

  11. 拖动未来：WebKit 完美融合拖放API的交互艺术

    2024-07-11 12:30:03       20 阅读

  12. helm安装解决无授权问题

    2024-07-11 12:30:03       18 阅读

  13. php获取,昨,今,后天.... 本周,月,年...日期时间戳

    2024-07-11 12:30:03       22 阅读

  14. 通过.NET6 创建的ASP.NET Core webapi项目中没有 Startup 类和ConfigureServices 方法

    2024-07-11 12:30:03       22 阅读

  16. 大话C语言：第28篇 内存分配与释放

    2024-07-11 12:30:03       18 阅读

  18. MySQL 中删除重复的数据并只保留一条

    2024-07-11 12:30:03       18 阅读

  19. 昇思训练营打卡第十八天（K近邻算法实现红酒聚类）

    2024-07-11 12:30:03       22 阅读

  22. spring boot 3.2.x 使用CDS加速启动

    2024-07-11 12:30:03       22 阅读

  25. 37.深度学习中的梯度下降法及其实现

    2024-07-11 12:30:03       20 阅读

  26. Spring Boot与Spring MVC的区别和联系

    2024-07-11 12:30:03       22 阅读

  28. 代码随想录-DAY⑥-哈希表——leetcode 383 | 454

    2024-07-11 12:30:03       21 阅读

  29. linux去掉行首的#字符

    2024-07-11 12:30:03       20 阅读

  30. 常见的负载均衡算法和实现方式

    2024-07-11 12:30:03       22 阅读