3D立体相册

最新推荐文章于 2022-09-25 12:56:55 发布

吧唧一大口

最新推荐文章于 2022-09-25 12:56:55 发布

阅读量137

点赞数 1

本文链接：https://blog.csdn.net/zb_0826/article/details/117751667

版权

做一个3D立体相册，拿去给喜欢的Ta表白吧。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>立体照片</title>
  <style type="text/css">
	body{
		background-color: #000000;
	}
	
	.container{
  		width: 800px;
  		height: 800px;
  		margin: 0 auto;
  	}
  	.container .main{
  		position: relative;
  		width: 100%;
  		height: 100%;
  		transform-style: preserve-3d;
  		animation: play 8s infinite linear; 
  	}
  	
  	img{
  		width: 400px;
  		height: 400px;
  	}
  	
  	.container .main div{
  		width: 400px;
  		height: 400px;
  		line-height: 400px;
  		position: absolute;
  		top: 50%;
  		left: 50%;
  		margin-top: -200px;
  		margin-left: -200px;
  		text-align: center;
  		color: #fff;
  		opacity: 0.7;
  	
  	
  	}
  	.container .main div:first-child{
  		transform: translateZ(200px);
  	
  	}
  	.container .main div:nth-child(2){
  		transform: translateZ(-200px);
  	}
  	.container .main div:nth-child(3){
  		transform: rotateY(-90deg) translateZ(200px);
  	}
  	.container .main div:nth-child(4){
  		transform: rotateY(90deg) translateZ(200px);
  	}
  	.container .main div:nth-child(5){
  		transform: rotateX(90deg) translateZ(200px);
  	}
  	.container .main div:nth-child(6){
  		transform: rotateX(-90deg)  translateZ(200px);
  	}
  	@keyframes play{
  		0% {transform: rotateX(0deg), rotateY(0deg) rotateZ(0deg);}
  	    100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
  	}  
  </style>
</head>
<body>
 <div class="container">
   	<div class="main">
   		<div><img src="" ></div>
   		<div><img src="" ></div>
   		<div><img src="" ></div>
   		<div><img src="" ></div>
   		<div><img src="" ></div>
   		<div><img src="" ></div>
   	</div>
  </div>  
</body>
</html>

只需要在img标签中添加图片地址即可。

吧唧一大口

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D立体相册

做一个3D立体相册，拿去给喜欢的Ta表白吧。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>立体照片</title> <style type="text/css"> body{ background-color: #000000; } .container{ width: 800px; height: 80
复制链接

扫一扫