首先，讲一下有关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相同
也可以单独设置，跟translate相同
4、rotate(angle) 2d旋转，沿中心点顺时针旋转
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>
