CSSだけでくるっと回転するボタンの作成

今回はCSSだけでくるりと奥に回転するボタンの作成を紹介します。

DEMO

まずHTMLのコードを記述していきます。

 <ul class="menu">
  <li class="btn-list1"><a href="#">Home</a></li>
  <li class="btn-list2"><a href="#">Profile</a></li>
  <li class="btn-list3"><a href="#">Work</a></li>
 </ul>

次に、CSSです。

.btn-list1 a{background-color:#87ceeb;}
.btn-list2 a{background-color:#b686eb;}
.btn-list3 a{background-color:#eb86a6;}

.menu{
 list-style-type: none;
 height: 100px;
}

.menu li{
 float:left;
 margin-right: 20px;
 text-align: center;
 transition: all 0.5s ease;
}

.menu li:hover{
 transform: scaleX(-1);
}

.menu li a{
 display: inline-block;
 width: 100px;
 height: 100px;
 line-height: 100px;
 border-radius:50px;
 color: #fff;
 text-align: center;
}

3つのボタンができました。 カーソルを合わせるとそれぞれ水平方向にくるりと回転します。

カーソルと離すと水平方向に反転し、元に戻ります。
余談ですがtransform:scaleY(-1)にすると垂直方向に回転します。

Javascriptに比べるとCSSでのアニメーションには限界はありますが、動作は非常に軽いので
CSSでこなせる部分は是非活用していきましょう。