hoverでボタンがくるんと回るアニメーションをCSSで作る方法

最近実装したCSSアニメーションで、画像にカーソルを持っていったら画像がくるんと回転するアニメーションを付けてみました。
ホバーで縦回転、横回転するアニメーションを作り方について説明します。

CSSでhoverでボタンがくるんと回るアニメーションをつける

まずはHTMLを用意します。

 

hoverで横回転させる

<p class="btn"><img src="xx.jpg"></p>

.btn{
    width: 150px;
}
.btn span{
    display: inline-block;
    transition: .5s
}
.btn:hover span{
    transform: rotateX(360deg);
}

 

横回転のサンブル

 

hoverで縦回転させる

<p class="btn"><img src="xx.jpg"></p>

.btn{
    width: 150px;
}
.btn span{
    display: inline-block;
    transition: .5s
}
.btn:hover span{
    transform: rotateX(360deg);
}

 

縦回転のサンブル

こんな感じでhoverでくるくる回転するようになります。