纯css制作3D旋转照片墙

最新推荐文章于 2023-12-26 18:28:35 发布

性野喜悲

最新推荐文章于 2023-12-26 18:28:35 发布

阅读量1.3k

点赞数

分类专栏： html+css

本文链接：https://blog.youkuaiyun.com/leng0920/article/details/114288564

版权

html+css 专栏收录该内容

113 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img_3D</title>
</head>
<style type="text/css">
    @keyframes an1{
        0%{
            transform: rotateY(0deg)  ;
        }
        50%{
            transform: rotateY(180deg)  ;
        }
        100%{
            transform: rotateY(360deg) ;
        }
    }
    .container{
        width: 400px;
        height: 400px;
        /* background: rgba(255,0,0,0.5); */
        /*opacity: 0.3;*/
        margin: 100px auto;
       /* perspective: 2000px; */ //设置元素被查看位置的视图
        transform-style: preserve-3d;
        animation: an1 10s linear 0s infinite;
    }
    .container img{
        width: 100px;
        height: 100px;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
    }
    .container img:nth-child(1){
        transform: rotateY(0deg) translateZ(150px);
    }
    .container img:nth-child(2){
        transform: rotateY(40deg) translateZ(150px);
    }
    .container img:nth-child(3){
        transform: rotateY(80deg) translateZ(150px);
    }
    .container img:nth-child(4){
        transform: rotateY(120deg) translateZ(150px);
    }
    .container img:nth-child(5){
        transform: rotateY(160deg) translateZ(150px);
    }
    .container img:nth-child(6){
        transform: rotateY(200deg) translateZ(150px);
    }
    .container img:nth-child(7){
        transform: rotateY(240deg) translateZ(150px);
    }
    .container img:nth-child(8){
        transform: rotateY(280deg) translateZ(150px);
    }
    .container img:nth-child(9){
        transform: rotateY(320deg) translateZ(150px);
    }
  
</style>
<body>
	<!-- 图片自定义 -->
<!--    <div class="container">
        <img src="img/1.jpg">
        <img src="img/2.jpg">
        <img src="img/3.jpg">
        <img src="img/4.jpg">
        <img src="img/5.jpg">
        <img src="img/6.jpg">
        <img src="img/7.jpg">
        <img src="img/8.jpg">
        <img src="img/9.jpg">
		
    </div> -->
	<div class="container">
	        <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/digital_conference_system/images/writer_import_icon.png">
	        <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/digital_conference_system/images/writer_import_icon.png">
	        <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/digital_conference_system/images/writer_import_icon.png">
	        <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/digital_conference_system/images/writer_import_icon.png">
	        <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/digital_conference_system/images/writer_import_icon.png">
	        <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/digital_conference_system/images/writer_import_icon.png">
	        <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/digital_conference_system/images/writer_import_icon.png">
	        <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/digital_conference_system/images/writer_import_icon.png">
	        <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/digital_conference_system/images/writer_import_icon.png">
			
	    </div>
	
</body>
</html>