<p>Hover on each box so it rotates</p>
<div class="container">
  <div class="box">
  <code>rotate: x 90deg;</code>
</div>
<div class="box">
  <code>rotate: y 90deg;</code>
</div>
<div class="box">
  <code>rotate: z 90deg;</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;
/*   border-radius:50%; */
  background-color: skyblue;
  border: solid 2px #db3951; 
  color: #00136c;
  display:flex;
  justify-content:center;
  align-items:center;
  transition: rotate 1s ease-in-out;
}

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

.box:nth-child(2):hover{
  rotate: y 90deg;
}

.box:last-child:hover{
  rotate: z 90deg;
}