フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(CSS)画像を立体的に回転させる

カードがくるくると回転するようにアニメーションさせるCSSです。奥行きを持った変形を行うtransformプロパティを、animationと組み合わせることで簡単に実装できますが、あまり使うことがなさそうなのでメモとして残しておきます。

HTML
<img class="rolling" src="images/cat01.png">
CSS

使用しているperspectiveプロパティは、画面からの奥行きを示すもので、値を1pxにすると画像が目の前にあるように表示され、値が大きくなるにつれ離れて見えるように表示されます。

@keyframes roll {
    from {
        transform: perspective(500px) rotateY(0deg);
    }
    50%{
        transform: perspective(500px) rotateY(180deg);
    }
    to{
        transform: perspective(500px) rotateY(360deg);
    }
}
.rolling{
    animation: roll 2s linear infinite;
}
実行例

f:id:jmqys:20151025230011p:plain
画像提供:写真素材ぱくたそ