纯css制作3D旋转照片墙

最新推荐文章于 2022-07-24 08:38:15 发布

性野喜悲

最新推荐文章于 2022-07-24 08:38:15 发布

阅读量1.2k

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/leng0920/article/details/114288564

版权

html+css 专栏收录该内容

113 篇文章 1 订阅

订阅专栏

<!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>

性野喜悲

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
纯css制作3D旋转照片墙

<!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) ; }
复制链接

扫一扫

专栏目录