今回はCSSだけでくるりと奥に回転するボタンの作成を紹介します。
まず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でこなせる部分は是非活用していきましょう。