当前位置： 移动技术网 > IT编程>网页制作>HTML > 利用css3制作一个3D电子旋转相册

利用css3制作一个3D电子旋转相册

2020年07月12日  | 移动技术网IT编程  | 我要评论

效果图

在这里插入图片描述

介绍

知识一种利用css3就能达到的3D旋转图片展示，先找出自己的或朋友的12张或者10张照片，利用角度旋转和3D立体配合动画效果就能实现3D旋转，话不多接下来给出过程步骤，一起来制作吧。

步骤

  1. 首先建立一个图片文件夹，在里面存放一张背景图，和12张旋转图片，图片大小可以自定。
    然后第一步设置背景
<style>
body,html{
            height: 100%;
            background: url(images/bg2.jpg) repeat;//使照片平铺在页面
        }
</style>

2.接下来在里面给出一个ul标签，在给每个li里面设置样式，使ul固定定位在页面，在设置每个li对y轴的旋转角度，以及对z轴的移动距离。
3.最后制作一个动画，引入就可以拉。

详细代码

<style>
	body,html{
			height: 100%;
            background: url(images/bg2.jpg) repeat;//使照片平铺在页面
        }
    ul,ol{
    	list-style:none;//清楚ul和li的样式
    }
	//给ul设置样式，使其固定在页面
	.warp{
			width: 280px;
            height: 400px;
            position: fixed;//固定定位，并使其居中
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            
            transform-style: preserve-3d;//3D效果
            transform: rotateX(15deg) rotateY(0deg);//使其略微X轴旋转角度，美观
            animation: gogo 30s linear infinite ;//引入动画，时间，匀速，永久
		}
	//给图片设置大小
	.warp li img{
            width: 280px;
            height: 400px;
        }
 	//使里面的li定位在ul里面。
	.warp li{
            position: absolute;
            top: 0;
            left: 0;
        }
   	//给li设置对y轴旋转，12张图片每张旋转30deg,形成一个圆，在让其对z轴移动距离。
    .lin1{
            transform: rotatey(0) translatez(800px);
        }
        .lin2{
            transform: rotatey(30deg) translatez(800px);
        }
        .lin3{
            transform: rotatey(60deg) translatez(800px);
        }
        .lin4{
            transform: rotatey(90deg) translatez(800px);
        }
        .lin5{
            transform: rotatey(120deg) translatez(800px);
        }
        .lin6{
            transform: rotatey(150deg) translatez(800px);
        }
        .lin7{
            transform: rotatey(180deg) translatez(800px);
        }
        .lin8{
            transform: rotatey(210deg) translatez(800px);
        }
        .lin9{
            transform: rotatey(240deg) translatez(800px);
        }
        .lin10{
            transform: rotatey(270deg) translatez(800px);
        }
        .lin11{
            transform: rotatey(300deg) translatez(800px);
        }
        .lin12{
            transform: rotatey(330deg) translatez(800px);
        }
 		//接下来设置一个动画效果就可以了。设置一个rotateX，是使其在x轴有上下波动美观。
        @keyframes gogo{
            0%{
                transform: rotateY(0deg) rotateX(0deg);
            }
            25%{
                transform: rotateX(15deg) rotateY(90deg);
            }
            50%{
                transform: rotateY(0deg) rotateY(180deg);
            }
            75%{
                transform: rotateX(-15deg) rotateY(270deg);
            }
            100%{
                transform: rotateX(0deg) rotateY(360deg);
            }
        }
</style>
<body>
 <ul class="warp">;//引入12张图片
        <li class="lin1"><img src="images/pic1.jpg" alt=""></li>;
        <li class="lin2"><img src="images/pic2.png" alt=""></li>;
        <li class="lin3"><img src="images/pic3.png" alt=""></li>;
        <li class="lin4"><img src="images/pic4.png" alt=""></li>;
        <li class="lin5"><img src="images/pic5.jpg" alt=""></li>;
        <li class="lin6"><img src="images/pic6.png" alt=""></li>;
        <li class="lin7"><img src="images/pic7.png" alt=""></li>;
        <li class="lin8"><img src="images/pic8.png" alt=""></li>;
        <li class="lin9"><img src="images/pic9.png" alt=""></li>;
        <li class="lin10"><img src="images/pic10.png" alt=""></li>;
        <li class="lin11"><img src="images/2.png" alt=""></li>;
        <li class="lin12"><img src="images/6.png" alt=""></li>;
    </ul>


</body>

最后

里面的立方体3D旋转也是简单实现的道理。如果大家要深入的话，可以给每个图片添加一个a标签，点击跳转。

本文地址：https://blog.csdn.net/CallMeBY/article/details/107284541

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网