Rotate element

                        
<div id="wrap">
  <div class="resultCont">
      <div class="rotateBox degType01"></div>
      <div class="rotateBox degType02"></div>
      <div class="rotateBox degType03"></div>
  </div>
</div>

                        
#wrap .resultCont{display: flex; justify-content: space-around; padding: 60px 20px 20px 20px;}
.rotateBox{width: 200px; height: 200px; transition: 1s;
border: 1px solid $blackBg; background-color: $dddBg;
    &.degType01:hover{transform: rotate(45deg);}
    &.degType02:hover{transform: rotate(0.5turn);}
    &.degType03:hover{transform: rotate(360deg);}
}

                        
#wrap .resultCont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    padding: 60px 20px 20px 20px;
}

#wrap .rotateBox {
    width: 200px;
    height: 200px;
    -webkit-transition: 1s;
    transition: 1s;
    border: 1px solid #000;
    background-color: #ddd;
}

#wrap .rotateBox.degType01:hover {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

#wrap .rotateBox.degType02:hover {
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn);
}

#wrap .rotateBox.degType03:hover {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.