css实现3d照片墙

效果图

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.mzph.cn/bicheng/44721.shtml

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