web ---- 图片册，按钮

发布时间：2024年01月18日
<!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>

?

鼠标悬停时

文章来源:https://blog.csdn.net/NBbabay/article/details/135635050
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章