【CSS】はためく【実用性ある？？】

　どうも！LSSです！！

　昨日の記事、「【CSS】transformを使って、要素を立体的に傾けてみる」の応用で、ちょっと遊んでみました。

サンプル

はためく

コード

<style><!--
@keyframes htmk{
from{
transform:perspective(150px) rotateY(-15deg) rotateX(15deg);
}
to{
transform:perspective(150px) rotateY(15deg) rotateX(-15deg);
}
}

.nbr{
display:inline-block;
transform-origin: 0% 50% 0px;
animation:htmk 0.8s linear 0s infinite alternate;
}
--></style>
<div class="nbr" style="border: 1px solid black; font-size: 40px;">はためく</div>

このコード、最後の一行を除く、赤文字部分をコピペして入れておけば、他の部分のタグにオレンジ文字部分の 

class="nbr"

を付け足すだけで、なんでもはためきます！

見出しもはためきます

↑<h2>タグに仕込めばこの通りｗｗｗ

<h2 class="nbr">見出しもはためきます</h2>

画像もはためきます！

<img class="nbr" width="150px" src="画像ファイルのURL" />

 ※画像そのままだとあまりにクセがひどいので、width="150px"で画像サイズを抑制しましたｗ

…ちょっと、ふざけすぎましたね^^;;;;;

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^