CSS

【CSS】ホバーでX軸またはY軸に回転するアニメーションAnimated Icons with CSS3

March 16, 2017
ANIMATED ICONS WITH CSS3

Animated Icons with CSS3はホバーでX軸またはY軸に回転するアニメーション化する。

CSS

<link href="dist/css/rotateXY.css" rel="stylesheet">

HTML

<div class="col-lg-4 col-lg-offset-4 text-center">
        <hr />
        <h3 class="text-uppercase">Rotating on the Y axis</h3>
            <ul class="list-unstyled">
                <li><a href="#" class="icon"></a></li>
            </ul>
        <hr />
        <h3 class="text-uppercase">Rotating on the X axis</h3>
            <ul class="list-unstyled">
                <li><a href="#" class="icon2"></a></li>
            </ul>
</div>