Css切换不同窗口

代码

DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Titletitle>
	head>
	<style>
		/*label {*/
		/*	display: block;*/
		/*}*/
		* {
			padding: 0;
			margin: 0;
		}
		
		body {
			height: 100vh;
			background: gray;
		}
		
		.container {
			width: 650px;
			height: 500px;
			margin: 150px auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			/*设置视距*/
			perspective: 1500px;
		}
		
		input {
			/*取消按钮*/
			display: none;
		}
		
		.container .tab_body {
			width: 500px;
			height: 105%;
			position: relative;
			/*开启子元素的3d效果*/
			transform-style: preserve-3d;
			display: flex;
			justify-content: center;
			text-align: center;
			/*transform: rotateY(48deg) rotateX(-20deg);*/
			
			transition: transform 2s ease;
		}
		
		.labels {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			height: 500px;
		}
		
		.labels label {
			width: 100px;
			height: 100px;
			display: block;
			text-align: center;
			cursor: pointer;
			line-height: 100px;
		}
		
		.container .tab_body .tab_content {
			width: 500px;
			height: 78%;
			background: yellowgreen; /*背景颜色的抵挡解决了文字的重叠*/
			position: absolute;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
		}
		
		.container .tab_body .tab_content:nth-child(1) {
			transform: translateY(-205px) rotateX(90deg);
			background: aquamarine;
		}
		
		.container .tab_body .tab_content:nth-child(2) {
			transform: translateZ(205px);
			background: darkred;
		}
		
		.container .tab_body .tab_content:nth-child(3) {
			transform: translateY(205px) rotateX(-90deg);
			background: darkslategrey;
		}
		
		.container .tab_body .tab_content:nth-child(4) {
			transform: translateZ(-205px) rotateX(180deg);
			background: khaki;
		}
		
		#btn1:checked ~ .tab_body {
			transform: rotateX(-90deg);
		}
		
		#btn2:checked ~ .tab_body {
			transform: rotateX(0deg);
		}
		
		#btn3:checked ~ .tab_body {
			transform: rotateX(90deg);
		}
		
		#btn4:checked ~ .tab_body {
			transform: rotateX(180deg);
		}
		
		.container .labels label:nth-child(1) {
			background: aquamarine;
		}
		
		.container .labels label:nth-child(2) {
			background: darkred;
		}
		
		.container .labels label:nth-child(3) {
			background: darkslategrey;
		}
		
		.container .labels label:nth-child(4) {
			background: khaki;
		}
		
		
		label:hover {
			opacity: 0.6;
		}
	
	style>
	<body>
		
		
		<div class="container">
			<input type="radio" name="tabPage" id="btn1" checked>
			<input type="radio" name="tabPage" id="btn2">
			<input type="radio" name="tabPage" id="btn3">
			<input type="radio" name="tabPage" id="btn4">
			<div class="tab_body">
				<div class="tab_content">
					唱
				div>
				<div class="tab_content">
					跳
				div>
				<div class="tab_content">
					rap
				div>
				<div class="tab_content">
					篮球
				div>
			div>
			<div class="labels">
				
				<label for="btn1">唱label>
				<label for="btn2">跳label>
				<label for="btn3">raplabel>
				<label for="btn4">篮球label>
			div>
		
		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
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

需要注意的细节

tab_content移动的距离是父元素tab_body宽度的一半，先移动再旋转
perspective景深属性，需要添加在父元素中
transition动画元素作用到tab_body上即可

最终效果

相关阅读:
美国能源部国家实验室将量子计算用于关键能源研究
 【SQL刷题】Day13----SQL分组数据专项练习
 leetcode每天5题-Day34
shell脚本的文本处理工具
 推荐云盘哪个好，各有各的优势
 安装特定指定版本低版本的ｒ包ｒ包降级
 【一、http】go的http基本请求方法
 STM32微控制器实现无人机智能导航与控制（内附资料）
云计算项目十一：构建完整的日志分析平台
 上半年暂停考试要补考？包含监理工程师、建筑师等十项考试
原文地址：https://blog.csdn.net/new_light123/article/details/138011078