首先，讲一下有关3D旋转的属性：
transform用于设置变形,有以下参数
1、translate(x,y) 2D的设置移动距离，x表示沿x轴的距离，y表示沿y轴的距离（y轴是向下为正）不写代表0
translateX(x) translateY(y) translateZ(z)
2、translate3d(x,y,z) 3D的，
3、scale(x,y) 元素缩放，是比例，省略y时，会默认y跟x相同
scale3d(x,y,z) 3d效果上的缩放
也可以单独设置，跟translate相同
4、rotate(angle) 2d旋转，沿中心点顺时针旋转
rotate3d(x,y,z,angle) 3d旋转
rotateX(angle) rotateY(angle) rotateZ(angle)
5、skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) skewY(angle)
变形相关
1、设置变形中心点
transform-origin:right bottom; 表示绕着右下旋转，第一个代表水平方向，第二个代表垂直方向，也可以是具体的数字（50px，50px）
2、3D效果
perspective 3D透视效果 作用于父级元素
transfrom-style:preserve-3d 3D嵌套效果
backface-visibility: 设置背面是否可见,为hidden时不可见，visible表示可见（默认值）
实例——table切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* input {
width: 100px;
height: 100px;
} */
/* label{
width: 100px;
height: 100px;
} */
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
background: gray;
}
.container {
width: 650px;
height: 334px;
margin: 150px auto;
display: flex;
justify-content: space-between;
align-items: center;
/* 设置视距 */
perspective: 1500px;
}
.container .tab_body {
width: 500px;
height: 300px;
background: olive;
position: relative;
/* 开启3D效果 */
transform-style: preserve-3d;
transform: rotateY(48deg);
transform: rotateX(0px);
/* 设置过度效果 */
transition: transform 2s ease;
}
input {
display: none;
}
.labels {
height: 334px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.labels label {
width: 100px;
height: 100px;
display: block;
cursor: pointer;
text-align: center;
line-height: 100px;
}
.labels label:hover {
opacity: 0.8;
}
.labels label:nth-child(1) {
background: khaki;
}
.labels label:nth-child(2) {
background: peru;
}
.labels label:nth-child(3) {
background: aliceblue;
}
.container .tab_body .tab_content {
width: 520px;
height: 300px;
background: lawngreen;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container .tab_body .tab_content:nth-child(2) {
transform: translateZ(150px);
background: peru;
}
.container .tab_body .tab_content:nth-child(1) {
transform: translateY(-150px) rotateX(90deg);
background: khaki;
}
.container .tab_body .tab_content:nth-child(3) {
transform: translateY(150px) rotateX(-90deg);
background: aliceblue;
}
#btn1:checked~.tab_body {
transform: rotateX(-90deg);
}
#btn2:checked~.tab_body {
transform: rotateX(0deg);
}
#btn3:checked~.tab_body {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<!--
label可以关联其他按钮，for中填的是想关联的id
所以，想要改变选项框的样式，可以通过label的style来达到
-->
<div class="container">
<input type="radio" name="tabs" id="btn1">
<input type="radio" name="tabs" id="btn2" checked>
<input type="radio" name="tabs" id="btn3">
<div class="tab_body">
<div class="tab_content">
<h1>top</h1>
<p>APEX真的是框是神作</p>
</div>
<div class="tab_content">
<h1>middle</h1>
<p>APEX真的是框是神作</p>
</div>
<div class="tab_content">
<h1>bottom</h1>
<p>APEX真的是框是神作</p>
</div>
</div>
<div class="labels">
<label for="btn1">top</label>
<label for="btn2">middle</label>
<label for="btn3">bottom</label>
</div>
</div>
</body>
</html>
