当前位置: article > 正文
web前端day6-----立方体旋转_前端实现立方体

作者：AllinToyou | 2024-02-16 21:30:52
踩
前端实现立方体
<!--
立方体效果：
1.HTML内容：立方体，六个面，每个面是一张图
  图片插入网页：1.img标签 2.background-image背景图
2.CSS基本样式：尺寸宽高，位置 每个面绝对定位 偏移
3.实现立方体翻转效果：
	1.每个面3D翻转组合成立方体
		动画 旋转
	2.立方体旋转
-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>立方体翻转</title>
 <style>
/* 样式初始化*/
body,ul,li{margin:0;padding:0}
/*立方体*/
	ul{
		list-style:none;
		width:200px;
		height:200px;
		margin:200px auto;
		position:relative;/*立方体相对定位*/
		animation:lftdh 10s linear infinite;/*调用立方体动画*/
		transform-style:preserve-3d;/*保留子元素3D效果*/
	
	}
/*	定义立方体旋转动画*/
@keyframes lftdh{
	 0% {
            transform: rotateX(0deg) rotateY(0deg);
        }

        10% {
            transform: rotateX(0deg) rotateY(180deg);
        }

        20% {
            transform: rotateX(-180deg) rotateY(180deg);
        }

        30% {
            transform: rotateX(-360deg) rotateY(180deg);
        }

        40% {
            transform: rotateX(-360deg) rotateY(360deg);
        }

        50% {
            transform: rotateX(-180deg) rotateY(360deg);
        }

        60% {
            transform: rotateX(90deg) rotateY(180deg);
        }

        70% {
            transform: rotateX(0) rotateY(180deg);
        }

        80% {
            transform: rotateX(90deg) rotateY(90deg);
        }

        90% {
            transform: rotateX(90deg) rotateY(0);
        }

        100% {
            transform: rotateX(0) rotateY(0);
        }

}
/*六个面*/
	ul>li{
		width:100%;
		height:100%;
		position:absolute;/*六个面绝对定位*/
		}
/*		每一个面位置的调整*/
/*第一个面*/
	ul>li.one{
		top:0;
		left:-200px;
		animation:d1 2s linear 1;
		animation-fill-mode:forwards;/*保留动画最后一帧*/
		transform-origin:right;
	}
/*	定义第一个面组成立方体动画过程*/
@keyframes d1{
	0%{transform:perspective(20000px) rotateY(0deg);}
	100%{transform:perspective(20000px) rotateY(90deg);}
}
/*第二个面*/
	ul>li.two{
		top:0;
		left:0;
	}
/*第三个面*/
	ul>li.three{
		top:0;
		left:200px;
		animation:d3 2s linear 1;
		animation-fill-mode:forwards;/*保留动画最后一帧*/
		transform-origin:left;
	}
/*	定义第三个面组成立方体动画过程*/
@keyframes d3{
	0%{transform:perspective(20000px) rotateY(0deg);}
	100%{transform:perspective(20000px) rotateY(-90deg);}
}
/*第四个面*/
	ul>li.four{
		top:-200px;
		left:0;
		animation:d4 2s linear 1;
		animation-fill-mode:forwards;/*保留动画最后一帧*/
		transform-origin:bottom;
	}
/*	定义第四个面组成立方体动画过程*/
@keyframes d4{
	0%{transform:perspective(20000px) rotateX(0deg);}
	100%{transform:perspective(20000px) rotateX(-90deg);}
}
/*第五个面*/
	ul>li.five{
		top:200px;
		left:0;
		animation:d5 2s linear 1;
		animation-fill-mode:forwards;/*保留动画最后一帧*/
		transform-origin:top;
	}
/*	定义第五个面组成立方体动画过程*/
@keyframes d5{
	0%{transform:perspective(20000px) rotateX(0deg);}
	100%{transform:perspective(20000px) rotateX(90deg);}
}
/*第六个面*/
	ul>li.six{
		top:200px;
		left:200px;
		animation:d6 2s linear 1;
		animation-fill-mode:forwards;/*保留动画最后一帧*/
		transform-origin:top left;
	}
/*	定义第六个面组成立方体动画过程*/
@keyframes d6{
	0%{transform:perspective(20000px) rotateX(0deg) rotateY(0deg) translateZ(200px);}
	100%{transform:perspective(20000px) rotateX(180deg) rotateY(180deg) translateZ(200px);}
}
/*	六个面中的图片*/
	ul>li>img{
		width:100%;
		height:100%;
	}
 </style>
 </head>
 <body>
  <ul>
	<li class="one"><img src="img/1.jpg"></li>
	<li class="two"><img src="img/2.jpg"></li>
	<li class="three"><img src="img/4.jpg"></li>
	<li class="four"><img src="img/5.jpg"></li>
	<li class="five"><img src="img/5.jpg"></li>
	<li class="six"><img src="img/6.jpg"></li>
  </ul>
 </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
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
在这里插入图片描述
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】