Css切换不同窗口
代码
<!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上即可
最终效果
原文地址：https://blog.csdn.net/new_light123/article/details/138011078
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！