如何获得滑动导航面板的按钮元素，以使用HTML和CSS进行旋转？

基本上，我有一个html页面，当你点击正方形时，我在其中设置了一个滑动面板。单击正方形时，如何使其旋转180度？我只能设法让按钮触发div滑动或按钮旋转，但不能同时触发两者。我注意到这与我如何放置输入标记有关。如果按钮位于标签内，则按钮会旋转，但不会影响面板。如果它在标签外面，按正方形会触发侧面板。我整天都在做这件事，但似乎想不出来。理想情况下，我想用箭头代替正方形，但我不知道从哪里开始

-滑动分区：

HTML:

<div class="main-wrap">
 <input id="slide-sidebar" type="checkbox" role="button" />
 <label for="slide-sidebar">
 <div class="tab"></div>
 </label>

 <div class="content">

 </div>
 </div>

.sidebar {
background-color: white;
width: 300px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
#navpan {
position: absolute;
right: 120px;
bottom: 740px;
}
.sidebar li{
color: black;
font-weight: bold;
font-size: 25px;
text-decoration: none;
list-style: none;
}
.content {
background-color: red;
position: absolute;
top: 0;
left: 190px;
right: 0;
bottom: 0;  
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}

input[type=checkbox] {
display: none;
}

input:checked ~ .content{ 
left: 0;
}

input:checked ~ label {
left: 0;
}

label {
z-index: 2;
position: absolute;
top: 50%;
left: 190px;
background-color: 0;
font-size:60px;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}

.tab {
width: 100px;
height: 100px;
background-color: white;
transition: all 0.75s 0.25s;
transform: rotate(0);
}

#slide-sidebar:checked + .tab{
transform: rotate(180deg);
}

---

我更新了你的代码。请检查一下。我将

onclick

函数添加到该框中，并创建了

rotated

类。使用css，我将该框旋转90度

$（文档）.ready（函数（）{
$（“#旋转”）。单击（函数（）{
$（this.toggleClass（'rotated'）；
});
});
.rotated{
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
-ms变换：旋转（90度）；
变换：旋转（90度）；
}
.侧边栏{
背景色：白色；
宽度：300px；
位置：绝对位置；
排名：0；
左：0；
底部：0；
}
#纳夫潘{
位置：绝对位置；
右：120px；
底部：740px；
}
.侧边栏李{
颜色：黑色；
字体大小：粗体；
字体大小：25px；
文字装饰：无；
列表样式：无；
}
.内容{
背景色：红色；
位置：绝对位置；
排名：0；
左：190px；
右：0；
底部：0；
-moz过渡：左0.5s轻松；
过渡：左0.5s；
}
输入[类型=复选框]{
显示：无；
}
输入：选中~.content{
左：0；
}
输入：选中~标签{
左：0；
}
标签{
z指数：2；
位置：绝对位置；
最高：50%；
左：190px；
背景色：0；
字体大小：60px；
-moz过渡：左0.5s轻松；
过渡：左0.5s；
}
.标签{
宽度：100px；
高度：100px；
背景色：白色；
过渡：所有0.75秒0.25秒；
}
#幻灯片侧边栏：选中+选项卡{
变换：旋转（180度）；
}

Lorem ipsum dolor sit amet，奉献精英。如果你不承认自己的过错，那么你就应该承认你的过错，因为你认为这是一种不公平的行为！
你已经很接近了，但还不是很接近

您需要更改：
#幻灯片侧栏：选中+.tab

至：
#幻灯片侧边栏：选中+标签>.tab

在初始选择器中，您希望
.tab
是
复选框的同级。
标签
是
.tab
的兄弟，是
标签
的子项


.rotated{
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
-ms变换：旋转（90度）；
变换：旋转（90度）；
}
.侧边栏{
背景色：白色；
宽度：300px；
位置：绝对位置；
排名：0；
左：0；
底部：0；
}
#纳夫潘{
位置：绝对位置；
右：120px；
底部：740px；
}
.侧边栏李{
颜色：黑色；
字体大小：粗体；
字体大小：25px；
文字装饰：无；
列表样式：无；
}
.内容{
背景色：红色；
位置：绝对位置；
排名：0；
左：190px；
右：0；
底部：0；
-moz过渡：左0.5s轻松；
过渡：左0.5s；
}
输入[类型=复选框]{
显示：无；
}
输入：选中~.content{
左：0；
}
输入：选中~标签{
左：0；
}
标签{
z指数：2；
位置：绝对位置；
最高：50%；
左：190px；
背景色：0；
字体大小：60px；
-moz过渡：左0.5s轻松；
过渡：左0.5s；
}
.标签{
宽度：100px；
高度：100px；
背景色：白色；
过渡：所有0.75秒0.25秒；
}
#幻灯片侧栏：选中+标签>.tab{
变换：旋转（180度）；
}

Lorem ipsum dolor sit amet，奉献精英。如果你不承认自己的过错，那么你就应该承认你的过错，因为你认为这是一种不公平的行为！
+
表示一个直接的兄弟姐妹，它
.tab
不是，而是
标签
包装
。tab
是。所以改变

#slide-sidebar:checked + .tab{
   transform: rotate(180deg);
}

到

请说明您所做的更改。这将清楚说明为什么您的解决方案有效而OP无效。更新了我的答案@JonP.）现在您应该注意到，您已经介绍了OP没有要求的两件事情，javascript和jquery。如果可能的话，OP是在一个CSS/HTML选项之后。好的@JonP我用CSS解决了这个问题，但是你已经提交了答案。：）
#slide-sidebar:checked + label .tab{
   transform: rotate(180deg);
}