frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

css3でコイントスのように水平に回転するアニメーション

スポンサードリンク


スポンサードリンク


読み込み時にコイントスのように水平に回転するアニメーションのcss3です。

マウスオーバー時も回転します。

<div class="coin-wrap">
 <div class="coin">
  <div class="front"><h2>コイン:表</h2></div>
  <div class="back"><h2>コイン:裏</h2></div>
 </div>
</div>
.coin-wrap .coin {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transition: all 3s ease;
}
.coin-wrap .coin div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    backface-visibility: hidden;
}
.coin-wrap .coin .front {
    color:#000;
    background-image: linear-gradient(to top left, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03);
    border: 5px solid #EDAC06;
    border-radius: 50%;
}
.coin-wrap .coin .back
{
    color:#000;
    background-image: linear-gradient(to top left, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03);
    border: 5px solid #EDAC06;
    border-radius: 50%;

}
.coin-wrap .coin {
    transform: rotateY( 720deg );
    animation: coin 3.5s;
    transition-timing-function: cubic-bezier(.01, -.105, .43, 1.59);
}
.coin-wrap .coin .back {
    transform: rotateY( 180deg );
}
@keyframes coin {
    0% {
        transform: rotateY( 0deg ) ;
    }
    100% {
        transform: rotateY( 1440deg ) ;
    }
}
.coin-wrap .coin:hover {
    transform: rotateY( 1440deg );
}

See the Pen QqPpBW by funclur (@funclur) on CodePen.