<p>Hover on each box so it rotates</p>
<div class="container">
  <div class="box">
  <code>rotate: 45deg;</code>
</div>
<div class="box">
  <code>rotate: 3.1416rad;</code>
</div>
<div class="box">
  <code>rotate: -50grad;</code>
</div>
<div class="box">
  <code>
    rotate: 1.75turn;
  </code>
</div>
</div>

html, body{
  height:100vh;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background: #00136c;
}

p{
  font-size: 24px;
  color:#fff;
}

.container{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.box {
  width: 150px;
  height: 150px;
  background-color: skyblue;
  border: solid 2px #db3951; 
  color: #00136c;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:.5s ease-in-out;
}

.box:first-child:hover{
  rotate: 45deg;
}

.box:nth-child(2):hover{
  rotate: 3.1416rad;
}

.box:nth-child(3):hover{
  rotate: -50grad;
}

.box:last-child:hover{
  rotate: 1.75turn;
}