web立体相册

最新推荐文章于 2023-07-07 12:59:19 发布

困惑的Z同学

最新推荐文章于 2023-07-07 12:59:19 发布

阅读量256

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/a505964648/article/details/127835663

版权

笔记专栏收录该内容

38 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			body {
				perspective: 800px;
			}

			@keyframes myAnimation {
				from {
					transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				}

				to {
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}


			.container>img {
				width: 200px;
				height: 200px;
				position: absolute;
			}

			.container {
				position: relative;
				width: 200px;
				height: 200px;
				margin: 300px auto;
				transform-style: preserve-3d;
				animation: myAnimation 10s infinite linear;
			}

			.container>img:first-child {
			}

			.container:hover>img:nth-child(2) {
				transform: translateX(-100px)rotateY(90deg);
			}

			.container>img:nth-child(2) {
				left: -200px;
				transform-origin: right;
				transform: rotateY(90deg);
			}

			.container:hover>img:nth-child(3) {
				transform: translateX(100px) rotateY(-90deg);
			}

			.container>img:nth-child(3) {
				right: -200px;
				transform-origin: left;
				transform: rotateY(-90deg);
			}

			.container:hover>img:nth-child(4) {
				transform: translateY(-100px) rotateX(-90deg);
			}

			.container>img:nth-child(4) {
				top: -200px;
				transform-origin: bottom;
				transform: rotateX(-90deg);
			}

			.container:hover>img:nth-child(5) {
				transform: translateY(100px) rotateX(90deg);
			}

			.container>img:nth-child(5) {
				bottom: -200px;
				transform-origin: top;
				transform: rotateX(90deg);
			}

			.container:hover>img:last-child {
				transform: translateZ(300px);
			}

			.container:hover>img:first-child {
				transform: translateZ(-100px);
			}

			.container>img:last-child {
				transform: translateZ(200px);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img src="c:/Users/50596/Desktop/ikun/1.jpg" alt="">
			<img src="c:/Users/50596/Desktop/ikun/2.jpg" alt="">
			<img src="c:/Users/50596/Desktop/ikun/3.jpg" alt="">
			<img src="c:/Users/50596/Desktop/ikun/4.jpg"alt="">
			<img src="c:/Users/50596/Desktop/ikun/5.jpg" alt="">
			<img src="c:/Users/50596/Desktop/ikun/6.jpg" alt="">
		</div>
	</body>
</html>