3d相册+css3

你的美，让我痴迷

于 2022-02-02 13:35:52 发布

阅读量452

点赞数

文章标签： css3 3d css

本文链接：https://blog.csdn.net/weixin_45932157/article/details/122769114

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				
			}
			body,html{
				 
				width: 100%;
				height: 100%;
				background: url(https://img2.baidu.com/it/u=2637839740,455720686&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500)  ;
				background-size: 100%;
			}
			.box{
				width: 280px;
				height: 400px;
				position: fixed;	
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				/* 制作一个3D空间 */
				transform-style: preserve-3d;
				/* 定义动画 */
				animation: img_root  20s  linear  infinite;
				 
			}
			@keyframes img_root{
				
				0%{
					transform:rotateX(0deg)  rotateY(0deg);
				}
				25%{
					transform:rotateX(10deg)  rotateY(90deg);
				}
				50%{
					transform:rotateX(0deg)  rotateY(180deg);
				}
				75%{
					transform:rotateX(-10deg)  rotateY(180deg);
				}
				100%{
					transform:rotateX(0deg)  rotateY(360deg);
				}
				 
			}
			.box  .imgbox{
				width: 280px;
				height: 400px;
				position: absolute;
				/* 让每个盒子进行正600方向位移 */
				transform-origin:center  center  -600px;
			}
			.box  .imgbox  img{
				display: block;
				width: 100%;
				height: 100%;
			}
			.imgbox1{
				transform: translateZ(600px);
			}
			.imgbox2{
				transform:  translateZ(600px)  rotateY(36deg)  ;
			}
			.imgbox3{
				transform: translateZ(600px)  rotateY(72deg);
			}
			.imgbox4{
				transform: translateZ(600px)  rotateY(108deg);
			}
			.imgbox5{
				transform: translateZ(600px)  rotateY(144deg);
			}
			.imgbox6{
				transform: translateZ(600px)  rotateY(180deg);
			}
			.imgbox7{
				transform: translateZ(600px)  rotateY(216deg);
			}
			.imgbox8{
				transform: translateZ(600px)  rotateY(252deg);
			}
			.imgbox9{
				transform: translateZ(600px)  rotateY(288deg);
			}
			.imgbox10{
				transform: translateZ(600px)  rotateY(324deg);
			}
			 
		</style>
	</head>
	<body>
		<div  class="box">
			<div class="imgbox imgbox1">
				<img src="https://img0.baidu.com/it/u=3348108161,4090300289&fm=253&fmt=auto&app=138&f=JPEG?w=772&h=500" >
			</div>
			<div class="imgbox imgbox2">
				<img src="https://img1.baidu.com/it/u=1961201402,3286512970&fm=253&fmt=auto&app=138&f=JPEG?w=490&h=695" >
			</div>
			<div class="imgbox imgbox3">
				<img src="https://img0.baidu.com/it/u=1240056232,610289474&fm=26&fmt=auto" >
			</div>
			<div class="imgbox imgbox4">
				<img src="https://img2.baidu.com/it/u=1127012818,54406412&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" >
			</div>
			<div class="imgbox imgbox5">
				<img src="https://img1.baidu.com/it/u=2793564285,2846423129&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333" >
			</div>
			<div class="imgbox imgbox6">
				<img src="https://img0.baidu.com/it/u=1819073924,1246023593&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=666" >
			</div>
			<div class="imgbox imgbox7">
				<img src="https://img2.baidu.com/it/u=3675353349,3978127228&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" >
			</div>
			<div class="imgbox imgbox8">
				<img src="https://img0.baidu.com/it/u=3889190774,3757976959&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=499" >
			</div>
			<div class="imgbox imgbox9">
				<img src="https://img1.baidu.com/it/u=4130249902,896061216&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" >
			</div>
			<div class="imgbox imgbox10">
				<img src="https://img1.baidu.com/it/u=3128663082,841671865&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" >
			</div>
		</div>
	</body>
</html>

效果图
在这里插入图片描述

你的美，让我痴迷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
3d相册+css3

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body,html{ width: 100%; height: 100%; backgrou
复制链接

扫一扫