CSSだけで要素の奥行回転アニメーションサンプル

a

b

CSSで実装する要素を奥行に回転させるアニメーションです
transitionでアニメーション時間を設定して、マウスホバー時にtransform:translateX()やtransform:translateY()でポジションを変更しています

HTML

<p class="square A">a</p>
<p class="square B">b</p>

CSS

.square{
  width: 100px;
  height: 100px;
  background: #3399ff;
  transition: 10s;
  -webkit-transition: 10s;
  margin:10px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.A:hover{
  transform:rotateX(3600deg);
}


.B:hover{
  transform:rotateY(3600deg);
}