3d相册 html 代码_纯css3d旋转相册

最新推荐文章于 2024-06-17 03:12:17 发布

凯莉-卡洛尔

最新推荐文章于 2024-06-17 03:12:17 发布

阅读量359

点赞数

文章标签： 3d相册 html 代码

本文链接：https://blog.csdn.net/weixin_35659005/article/details/113040645

版权

本文展示了一个使用HTML和纯CSS3技术实现的3D旋转相册效果，读者可以替换图片以创建个性化的3D相册。

摘要由CSDN通过智能技术生成

我们先来看下效果和代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				*{margin:0;padding: 0;}
	            li{list-style:none;}
	            html,body{height:100%;}
	            .box{
	                height:100%;
	                width:100%;
	                background: url(img/bj1.jpg) no-repeat;
	                background-size:  cover;
	                perspective: 1200px;
	            }
	            .box ul{
	                width:200px;
	                height:300px;
	                position: absolute;
	                top:50%;left:50%;
	                margin:-150px 0 0 -100px;
	                transform-style: preserve-3d;
	                animation: play  20s linear infinite;
	            }
	            .box ul li{
	                width:200px;
	                height:300px;
	                position: absolute;
	                top:0;left:0;
	            }
	            .box ul li img{
	                width:200px;
	                height:300px;
	            }
				
				 .box ul li:nth-child(1){
				                transform: rotateY(36deg) translateZ(500px);
				            }
				            .box ul li:nth-child(2){
				                transform: rotateY(72deg) translateZ(500px);
				            }
				            .box ul li:nth-child(3){
				                transform: rotateY(108deg) translateZ(500px);
				            }
				            .box ul li:nth-child(4){
				                transform: rotateY(144deg) translateZ(500px);
				            }
				            .box ul li:nth-child(5){
				                transform: rotateY(180deg) translateZ(500px);
				            }
				            .box ul li:nth-child(6){
				                transform: rotateY(216deg) translateZ(500px);
				            }
				            .box ul li:nth-child(7){
				                transform: rotateY(252deg) translateZ(500px);
				            }
				            .box ul li:nth-child(8){
				                transform: rotateY(288deg) translateZ(500px);
				            }
				            .box ul li:nth-child(9){
				                transform: rotateY(324deg) translateZ(500px);
				            }
				            .box ul li:nth-child(10){
				                transform: rotateY(360deg) translateZ(500px);
				            }           
				  @keyframes play{
				                0%{ transform: rotateX(0) rotateY(0deg) scale(1)}
				                50%{ transform: rotateX(5deg) rotateY(180deg) scale(0.7)}
				                100%{ transform: rotateX(0) rotateY(360deg)  scale(1)}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><img src="img/767c14d61de6d5e4b990fc572a6568e1_1.jpg" ></li>
				<li><img src="img/7a5807db25083336f4f743ae2f3f3a5d_1.jpg" ></li>
				<li><img src="img/timg%5B1%5D.jpg" ></li>
				<li><img src="img/u=1494278401,3707696933&fm=26&gp=0%5B1%5D.jpg" ></li>
				<li><img src="img/u=1502903317,987147048&fm=26&gp=0%5B1%5D.jpg" ></li>
				<li><img src="img/u=1723581145,678087488&fm=26&gp=0%5B1%5D.jpg" ></li>
				<li><img src="img/u=2471723103,4261647594&fm=26&gp=0%5B1%5D.jpg" ></li>
				<li><img src="img/u=2739698855,2466469814&fm=26&gp=0%5B1%5D.jpg" ></li>
				<li><img src="img/u=361494981,3349639195&fm=26&gp=0%5B1%5D.jpg" ></li>
				<li><img src="img/u=895819719,4227412122&fm=26&gp=0%5B1%5D.jpg" ></li>
			</ul>
		</div>
	</body>
</html>

如果需要可把下方图片换成自己喜欢的，制作成自己的相册。

凯莉-卡洛尔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3d相册 html 代码_纯css3d旋转相册

我们先来看下效果和代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding: 0;} li{lis...
复制链接

扫一扫