css实现3d照片墙

news2024/9/17 7:35:56

效果图

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1917149.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！