どうも！LSSです！！
今回はまた、CSS小ネタです。
ブランコ
←のように、ゆらゆら揺れます。
文章は普通に書くと、ブランコの右に並ぶ事になります。
これは「float:left;」をブランコに設定しているためで、その記述を削除すると文章はブランコの下に来る事になります。
コード
<style>
@keyframes swinga{
0%{transform:rotateX(60deg);}
100%{transform:rotateX(-60deg);}
}
.swingwaku{
position:relative;
float:left;
width:100px;
height:100px;
transform-style:preserve-3d;
perspective:300px;
margin-left:20px;
}
.swing{
position:relative;
width:100%;
height:100%;
border-style:double;
border-color:black;
border-width:0px 3px 15px 3px;
padding-top:50px;
text-align:center;
transform-origin:50% 0%;
animation:swinga ease-in-out 2s infinite alternate;
}
</style>
<div class="swingwaku">
<div class="swing">ブランコ</div>
</div>
<p>←のように、ゆらゆら揺れます。</p>
<p>文章は普通に書くと、ブランコの右に並ぶ事になります。</p>
<p>これは「float:left;」をブランコに設定しているためで、その記述を削除すると文章はブランコの下に来る事になります。</p>
上記コードをコピペし、赤太字部分を好きな言葉に変えて使用できます。
オレンジ太字部分はborderでブランコを描画している部分ですが、例えばブランコの部分をブランコの画像に置き換えて使用したい場合などには削除してしまってOKです。
あとがき
これもまた、コメント欄でいただいたアイデアです^^
CSSのアニメーションや3Dを用いて、日常にある動きを表現するのも面白いですね。
「扉」や「本」、「カード」に「鹿威し（ししおどし）」などは作っていましたが、こうして色々挑戦してみて、使い勝手は後から考える、というのもいいのかも？ｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
