#やりたいこと
マウスオーバー時にdivの要素をふわっと浮きあがらせたい。例えば、カードやボタンなどだ。
#実装方法
<a href="#" class="fly">テスト</a>
.fly {
background-color: #3169d1;
color: #fff !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
margin: 10px 0 0 0;
}
.fly:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
これだけでふわっとした動きをつけることができる。