labelの画像を回転させたい

Question

右上のピンクの部分のアイコンをクリックした時に回転するようなアニメーションをつけたいです。 transform等のコードで試したのですが無理でした。ご教授頂ければ幸いです。

<div class="wrappir">
  	
  	   <div class="sidebar">
        <label for="label1"> <i class="fas fa-bars"></i></label>
     	<input type="checkbox" id="label1" class="csc"/>
     	
<img class="sidelogo" src="logo.png" alt="店名">
          

  		<div class="side-container">
<!--ここから非表示-->
        
  		  <ul class="flex-container">
  		   <li><a href="#">TOP</a></li>
  		   <li><a href="#">MESSAGE</a></li>
  		   <li><a href="#">GALLERY</a></li>
  		   <li><a href="#">BRAND</a></li>
  		   <li><a href="#">PROJECT</a></li>
  		   <li><a href="#">COMPANY</a></li>
  		  </ul>
  		<div class="side-icon">
  			<a href="#"><i class="fab fa-facebook-square"></i></a>
  			<a href="#"><i class="fab fa-twitter-square"></i></a>
  			<a href="#"><i class="fab fa-instagram-square"></i></a>
  			<a href="#"><i class="fab fa-youtube-square"></i></a>
  		</div>
      </div>
     
  	 </div>

@media screen and (max-width: 900px) {
    .container{
        width: 130%;
    }
    
    .sidebar{
        position: static;
        width: 77%;
        background-color: green;

    }
    /*サイドメニューの固定解除*/
    

    .sidelogo {
       margin: 0 auto;
       display: block;
       position: relative; bottom:25px;

    }
    

    .sidebar label {
       float:  right; 
       font-weight: bold;
       cursor :pointer;
       background-color: pink;
       display: block;
       font-size: 20px;
       padding-top: 15px;
       padding-right: 20px;
       transition: transform 0.2s ease-in-out;
    }

    
        

/*チェックは見えなくする*/
      #label1{
       display: none;
    }

/*ロゴ以外の中身を非表示にしておく*/
    .side-container {
       height: 0;
       padding: 0;
       overflow: hidden;
       opacity: 1;
       transition: 0.8s;
    }



/*クリックして表示*/
    #label1:checked ~ .side-container {
    padding: 5px;
    height: auto;
    opacity: 1;
    display: block;
    position: absolute;
    width: 100%;
    background-color: white;
　　}

    .flex-container  li::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    }

    .flex-container  li{
        border-bottom: solid 1px #ccc;
    }

    .side-icon i{
        margin-right: 10px;
    }


    .bottom-logo{
        flex-direction: column;
        align-items: center;
    }
}

Comments

[m.ts10806]

現状起きている問題は「無理でした」では伝わりません。
https://teratail.com/help/question-tips#questionTips3-4

[dehi0923]

お返事ありがとうございます。transform等のタグを挿入してもアイコンは動きませんでした。
言葉足らずで申し訳ありません。もう少し調べてみます。

Answer 1

こんにちは。

サンプル

         <input type="checkbox" id="label1" class="csc"/>
        <!-- ↑↓逆にする -->
        <label for="label1"> <i class="fas fa-bars"></i></label>

    #label1:checked ~ label{
        transform: rotate(90deg);
    }

Answer 2

一度divの閉じタグなどみなおして、必要であれば質問欄を書き直して下さい。
開始タグと閉じタグの整合がとれていないため、質問者様の意図が伝わりにくいです。
また、整合が取れれば、cssが効き出すかもしれません。

Comments

[dehi0923]

お返事ありがとうございます。試してみます。
よろしくお願いいたします。

[tomtomtomtom]

あら
マイナス評価ですね
お役に立てずに申し訳ありませんでした。

[dehi0923]

いえ
高評価させていただいております。
よろしくお願いいたします。

[tomtomtomtom]

？？
高評価ありがとうございます。
このマイナス評価はだれでしょう^^;

[dehi0923]

とんでもないです。
お忙しい中お返事頂いて助かりました！
低評価は分からないですね(>_<)

[tomtomtomtom]

こちらこそ、とんでもないです。
また機会がありましたら宜しくお願い致します。