どうも！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"で画像サイズを抑制しましたｗ
…ちょっと、ふざけすぎましたね^^;;;;;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
