rotate(回転)

実行結果

回転させます。

形は変えません。

プログラム

  HTML
  <input type="checkbox" id="in0">
  <div class="div0"></div>
  
/*CSS*/
.div0{
  width:  100px; height: 30px;/*箱の大きさです*/
  background-color: #e48;
  position: relative;top: 0vw;left: 0vw;/**/
  transition: all 1s;}/*経過時間*/
#in0:checked ~ .div0{/*スイッチ0が入ったとき*/
  transform: rotate(0.5turn);}/*回転*/ 

最後の1行が回転させるメソッドです。

右側が優先されます。

0.5turnは180degになります。

---

回転角度

実行結果

いろいろな角度に回転させます。

-180° -120° -90° -45° -30° 0° 30° 45° 90° 120° 180°

プログラム

  HTML
  <input type="checkbox" id="in1">-180°
  <input type="checkbox" id="in2">-120°
  <input type="checkbox" id="in3">-90°
  <input type="checkbox" id="in4">-45°
  <input type="checkbox" id="in5">-30°
  <input type="checkbox" id="in6">0°
  <input type="checkbox" id="in7">30°
  <input type="checkbox" id="in8">45°
  <input type="checkbox" id="in9">90°
  <input type="checkbox" id="in10">120°
  <input type="checkbox" id="in11">180°
  <div class="div0 m2">M2</div>
<br>
<br>
<br>
<br>
<br>
  
  
/*CSS*/
#in1:checked ~ .m2{/*スイッチ1が入ったとき*/
  transform: rotate(-180deg);}/*回転1*/ 
#in2:checked ~ .m2{/*スイッチ2が入ったとき*/
  transform: rotate(-120deg);}/*回転1*/ 
#in3:checked ~ .m2{/*スイッチ3が入ったとき*/
  transform: rotate(-90deg);}/*回転2*/ 
#in4:checked ~ .m2{/*スイッチ4が入ったとき*/
  transform: rotate(-45deg);}/*回転1*/ 
#in5:checked ~ .m2{/*スイッチ5が入ったとき*/
  transform: rotate(-30deg);}/*回転2*/
#in6:checked ~ .m2{/*スイッチ6が入ったとき*/
  transform: rotate(0deg);}/*回転1*/ 
#in7:checked ~ .m2{/*スイッチ7が入ったとき*/
  transform: rotate(30deg);}/*回転2*/ 
#in8:checked ~ .m2{/*スイッチ8が入ったとき*/
  transform: rotate(45deg);}/*回転1*/ 
#in9:checked ~ .m2{/*スイッチ9が入ったとき*/
  transform: rotate(90deg);}/*回転2*/
#in10:checked ~ .m2{/*スイッチ10が入ったとき*/
  transform: rotate(120deg);}/*回転1*/ 
#in11:checked ~ .m2{/*スイッチ11が入ったとき*/
  transform: rotate(180deg);}/*回転2*/ 
.m2{top: 10vw;left: 0vw;}    

もっと効率的な方法を知りたいものです。