html - 如何让滑动导航面板的按钮元素随 HTML 和 CSS 一起旋转？

Question

基本上，我有一个 html 页面，当您单击正方形时，我在其中设置了一个滑动面板。单击正方形时如何使正方形旋转 180 度？我只能设法让按钮触发 div 滑动或按钮旋转，但不能同时触发两者。我注意到这与我放置输入标签的方式有关。如果它在标签内，按钮会旋转但对面板没有影响。如果它在标签之外，则按下方 block 会触发侧面板。一整天都在这样做，但似乎无法弄清楚。理想情况下，我希望用箭头代替正方形，但我不知道从哪里开始......

-滑动格: https://codepen.io/yung_terminal/pen/oWrZZj

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>

CSS:

.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);
}

Answer 1

我更新了你的代码。请检查一下。 DEMO .我向该框添加了 onclick 函数并创建了 rotated 类。使用 css 我将该框旋转 90 度。

$(document).ready(function() {
  $('#rotate').click(function(){
    $(this).toggleClass('rotated');
});
});

.rotated { 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.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; 
}
#slide-sidebar:checked + .tab{
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrap">
      <input id="slide-sidebar" type="checkbox" role="button" />
      <label for="slide-sidebar">
        <div class="tab" id="rotate"></div>
      </label>
  <div class="content">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nulla accusamus illo a dolorum quo, maxime fuga ea nam quae ab deserunt quas distinctio culpa recusandae assumenda quisquam repellendus, perferendis!</h1>
  </div>
</div>