Css切换不同窗口

最新推荐文章于 2024-05-06 21:49:54 发布

赛博末影猫

最新推荐文章于 2024-05-06 21:49:54 发布

阅读量654

点赞数 4

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/new_light123/article/details/138011078

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</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可以扩大单选框的点击范围-->
				<label for="btn1">唱</label>
				<label for="btn2">跳</label>
				<label for="btn3">rap</label>
				<label for="btn4">篮球</label>
			</div>
		
		</div>
	</body>
</html>

需要注意的细节

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

最终效果

赛博末影猫

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Css切换不同窗口

margin;bodyheight;background;height;margin;display;;;/*设置视距*/;input/*取消按钮*/display;width;height;position;/*开启子元素的3d效果*/;display;;text-align;;;height;width;height;display;
复制链接

扫一扫