web立体相册

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

在这里插入图片描述

相关阅读:
中级C++：map和set的迷你实现
mysql 修改 COMMENT
springboot集成swagger3.0
Java---数据库---MyBatisPlus
SpringBoot实战（1）
C++——基于多态的职工管理系统
Linux之Vim编辑命令
【设计模式】Head First 设计模式——构建器模式 C++实现
SpringMVC
最新豆瓣top250爬虫案例代码分析[注释齐全]

原文地址：https://blog.csdn.net/a505964648/article/details/127835663