CSS3 简单3D旋转画册_画册翻转效果

作者：我家自动化 | 2024-02-15 20:29:20

踩

画册翻转效果

CSS3 简单3D旋转画册

上次我们简单介绍了c3的一些基础知识，我们今天来做一个小练习；

在这里插入图片描述
这个简单的案例是3D的一个旋转画册，那么上面是我们的一个效果图，因为不能够传视屏所以就暂时只能够截图来看一下具体结构。
正如大家所看见的，该相册由两个正方体组成，由大的正方体包裹着小的正方体，实现方式其实是用了margin或者使用定位position来实现。

其实这个画册的做法很简单，这边就不一步一步的解释了，下面我将代码粘贴出来，大家自行测试。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>3D旋转画册</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
	</head>
	<style>
		#album-inner{
			height: 100px;
			width: 100px;
			position: absolute;
			top: 45%;
			left: 45%;
			transform-style: preserve-3d;
			/* transform: rotateX(-30deg) rotateY(-45deg); */
			/* perspective: 800px; */
			animation: move 16s linear infinite;
		}
		//选择器创建move运动规则
		@keyframes move{
			from{
				transform: rotateX(0deg) rotateY(0deg);
			}
			to{
				transform: rotateX(-360deg) rotateY(-360deg);
			}
		}
		ul li{
			height: 100%;
			width: 100%;
			position: absolute;
		}
		ul li img{
			height: 100%;
			width: 100%;
		}
		/* 六张图片分别设置位置 */
		#album-inner li:nth-of-type(1){
			transform: translateZ(50px);
		}
		#album-inner li:nth-of-type(2){
			transform: translateX(50px) rotateY(90deg);
		}
		#album-inner li:nth-of-type(3){
			transform: translateZ(-50px);
		}
		#album-inner li:nth-of-type(4){
			transform: translateX(-50px) rotateY(90deg);
		}
		#album-inner li:nth-of-type(5){
			transform: translateY(-50px) rotateX(90deg);
		}
		#album-inner li:nth-of-type(6){
			transform: translateY(50px) rotateX(90deg);
		}
		/* 外面的旋转 */
		#album-outer{
			/* transition: transfrom 3s linear !important; */
			height: 160px;
			width: 160px;
			position: absolute;
			top: 41%;
			left: 42.5%;
			transform-style: preserve-3d;
			/* transform: rotateX(-30deg) rotateY(-45deg); */
			/* perspective: 800px; */
			animation: move 16s linear infinite;
			/* opacity: 0.5; */
		}
		#album-outer li{
			opacity: 0.3;
			transition:all 3s linear;
		}
		#album-outer li:nth-of-type(1){
			transform: translateZ(80px);
		}
		#album-outer li:nth-of-type(2){
			transform: translateX(80px) rotateY(90deg);
		}
		#album-outer li:nth-of-type(3){
			transform: translateZ(-80px);
		}
		#album-outer li:nth-of-type(4){
			transform: translateX(-80px) rotateY(90deg);
		}
		#album-outer li:nth-of-type(5){
			transform: translateY(-80px) rotateX(90deg);
		}
		#album-outer li:nth-of-type(6){
			transform: translateY(80px) rotateX(90deg);
		}
		
		
	</style>
	<body>
		<ul id="album-inner">
			<li><img src="./img/1.jpg" alt=""></li>
			<li><img src="./img/2.jpg" alt=""></li>
			<li><img src="./img/3.jpg" alt=""></li>
			<li><img src="./img/4.jpg" alt=""></li>
			<li><img src="./img/5.jpg" alt=""></li>
			<li><img src="./img/6.jpg" alt=""></li>
		</ul>
		<ul id="album-outer">
			<li><img src="./img/1.jpg" alt=""></li>
			<li><img src="./img/2.jpg" alt=""></li>
			<li><img src="./img/3.jpg" alt=""></li>
			<li><img src="./img/4.jpg" alt=""></li>
			<li><img src="./img/5.jpg" alt=""></li>
			<li><img src="./img/6.jpg" alt=""></li>
		</ul>
	</body>
	<script type="text/javascript" src="js/jquery3.4.1.js"></script>
	<script type="text/javascript">
		// 设置一个点击事件点击平移外部距离
		$(function(){
			// 设置一个开关，判断外部闭合还是打开
			var switchMove = false;
			var outerLi = $('#album-outer').children();
			// 书写滚动函数
			function move(){
				if(switchMove){
					$('#album-outer').css({
						transition:'all 3s linear',
						height:'160px',
						width:'160px',
						top:'41%',
						left: '42.5%'
					});
					// 内部透明
					$('#album-inner li').css('opacity',1);
					// 外部透明
					// outerLi.css('opacity',0.8);
					outerLi.eq(0).css({
						transform: 'translateZ(80px)'
					})
					outerLi.eq(1).css({
						transform: 'translateX(80px) rotateY(90deg)'
					})
					outerLi.eq(2).css({
						transform: 'translateZ(-80px)'
					})
					outerLi.eq(3).css({
						transform: 'translateX(-80px) rotateY(90deg)'
					})
					outerLi.eq(4).css({
						transform: 'translateY(-80px) rotateX(90deg)'
					})
					outerLi.eq(5).css({
						transform: 'translateY(80px) rotateX(90deg)'
					})
					switchMove = !switchMove;
				}else{
					// 内部透明
					// $('#album-inner li').css('opacity',0.5);
					// 外部透明
					outerLi.css('opacity',0.6);
					$('#album-outer').css({
						transition:'all 3s linear',
						height:'300px',
						width:'300px',
						left:'37.5%',
						top:'35.5%'
					});
					outerLi.eq(0).css({
						transform: 'translateZ(200px)'
					})
					outerLi.eq(1).css({
						transform: 'translateX(200px) rotateY(90deg)'
					})
					outerLi.eq(2).css({
						transform: 'translateZ(-200px)'
					})
					outerLi.eq(3).css({
						transform: 'translateX(-200px) rotateY(90deg)'
					})
					outerLi.eq(4).css({
						transform: 'translateY(-200px) rotateX(90deg)'
					})
					outerLi.eq(5).css({
						transform: 'translateY(200px) rotateX(90deg)'
					})
					switchMove = !switchMove;
				}
				
			}
			
			// 添加事件监听
			$(document).on('click',move)
			
			
		})
	</script>
</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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196

这边我就只简单解释一下思路，制作3D模型最主要的是要有一个3D的思维，我这边制作3D的方式主要是将所有的面集中在一个点上（使用position），然后想象着将每个面发射出去，例如今天的案例是一个正方形，那么我们将六个面按照不同的方向发射出去相同的距离（使用translate平移），平移出去之后我们要将每个面旋转到各自相应的位置上就可以了（rotate旋转），具体操作什么模型还需要自己进行一个计算。当然最重要的要记得给父级元素添加transfrom-style，让子元素在3D空间显示。
具体让模型旋转起来，是使用@keyframes选择器定义样式，然后使用animation让他动起来，这个使用方法和jquery当中的animate很相似，作用方式和使用方式都差不多，但是使用css3会有更高的效率。

在套用我的代码时候记得自行添加图片，自行引入jquery
文章就到这里，如有错误疑问请指出，将及时修改。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/86719