web ---- 图片册，按钮

最新推荐文章于 2024-06-13 08:39:52 发布

柒玖zzz

最新推荐文章于 2024-06-13 08:39:52 发布

阅读量668

点赞数 11

文章标签： css3 css html

本文链接：https://blog.csdn.net/NBbabay/article/details/135635050

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				perspective: 1000px;
			}
			@keyframes myAnimation{
				from{
					transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				}
				to{
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}
			.container{
				margin: 200px;
				position: relative;
				transform-style: preserve-3d;
				transition: 3s;
				animation: myAnimation 5s linear 0s infinite;
			}
			.container:hover>img:first-child{
				left:-300px;
			}
			.container:hover>img:nth-child(2){
				top: -300px;
			}
			.container:hover>img:nth-child(3){
				left: 300px;
			}
			.container:hover>img:nth-child(4){
				top: 300px;
			}
			.container:hover>img:nth-child(5){
				transform: translateZ(-100px);
			}
			.container:hover>img:nth-child(6){
				transform: translateZ(300px);
			}
			.container>img{
				width: 200px;
				height: 200px;
				position: absolute;
				border: 1px solid orange;
				transition: 3s;
			}
			.container>img:first-child{
				left:-200px;
				transform-origin: right;
				transform: rotateY(90deg);
			}
			.container>img:nth-child(2){
				top:-200px;
				transform-origin: bottom;
				transform: rotateX(-90deg);
			}
			.container>img:nth-child(3){
				left:200px;
				transform-origin: left;
				transform: rotateY(-90deg);
			}
			.container>img:nth-child(4){
				top: 200px;
				transform-origin: top;
				transform: rotateX(90deg);
			}
			.container>img:nth-child(6){
				transform: translateZ(200px);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img src="https://img1.baidu.com/it/u=2559867097,3726275945&fm=253&fmt=auto&app=138&f=JPEG?w=1333&h=500" alt="" />
			<img src="https://img1.baidu.com/it/u=2790304584,1258411054&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="" />
			<img src="https://img1.baidu.com/it/u=7456317,4282812646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="" />
			<img src="https://img1.baidu.com/it/u=1310564963,1641173348&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="" />
			<img src="https://img0.baidu.com/it/u=3993870005,3740828102&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="" />
			<img src="https://img2.baidu.com/it/u=2312383180,3750420672&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="" />
		</div>
	</body>
</html>