Html 选项卡模型第四个子项未显示

我正在处理这个选项卡模型，但遇到了一些问题。我只是浏览了一下标签模型，发现这很有趣。但我发现只有三个标签。所以，据我所知，我已经为第四个选项卡添加了代码，但它没有显示出来。轮换时有一些计算错误

.透视图{ 透视图：76em； 透视原点：50%50px； 宽度：494px； 保证金：0自动； 字体系列：“Roboto”，无衬线； 字号：100； 颜色：fff； 文本对齐：居中； } 输入{ 显示：无； } .标签{ 位置：绝对位置； 宽度：60px； 高度：47px； 背景：粉红色； 右：10px； 线高：47px； 字体大小：300； } .选项卡：第n-child1页{ 顶部：-5px； 背景：06d6a0； } .tab:nth-child2{ 顶部：53px； 背景：1b9aaa； } .tab:nth-child3{ 顶部：112px； 背景：ef476f； } .tab:nth-child4{ 顶部：170px； 背景：绿色； } .立方体{ 位置：相对位置； 保证金：60像素自动0； 宽度：300px； 高度：200px； 变换原点：0 100px； 变换样式：保留-3d； 过渡：0.5s轻松过渡； } .选项卡内容{ 宽度：300px； 高度：200px； 位置：绝对位置； } .选项卡内容h1{ 字体大小：25px； 利润率：75px 0 10px； 字体大小：300； } .tab内容页{ 字体大小：12px； } .tab内容：第n-child1页{ 变换：rotateX-270度变换Y-100px； 变换原点：左上角； 背景：06d6a0； } .tab内容：第n-child2页{ 转换：translateZ100px； 背景：1b9aaa； } .tab内容：第n-child3页{ 变换：旋转90度平移100px； 变换原点：底部中心； 背景：ef476f； } .tab内容：第n-child4页{ 变换：旋转25度translateY-20px； 变换原点：底部中心； 背景：9f476f； } 选项卡顶部：选中~.cube{ 变换：rotateX-90度； } 选项卡前面：选中~.cube{ 变换：旋转0度； } 选项卡底部：选中~.cube{ 变换：旋转90度； } 返回选项卡：选中~.cube{ 变换：旋转45度； } 有点风格的标准手风琴 顶部 正面 底部 返回 顶级内容 这太棒了

封面内容 这很酷

底部内容 这很甜

背景内容 这太壮观了

---

看起来你只需要改变一下

<label class="tab" for="tab-bottom">BACK</label>

到

您已经复制了选项卡底部标签

---

请参阅此示例，了解完整的工作示例。

您没有更改最后一项的类

现在：

它应该是：

<label class="tab" for="tab-back">BACK</label>

---

是的，谢谢，我错过了，但轮换不起作用。但轮换有问题。@Mohammedwahedkhan我用一个小提琴链接更新了我的答案，在那里你可以找到一个完全起作用的例子。你能帮我解决文本镜像问题吗？你尝试过文本镜像的方法吗？请帮我解决。

<label class="tab" for="tab-bottom">BACK</label>

<label class="tab" for="tab-back">BACK</label>