BLOGCSSのtransformでクルクル回転するパネルのサンプルHTML/CSSコーディングTwitterFacebookはてブPocketLINEコピー2013.02.14スポンサーリンクCSSの【transform:rotate()】を使った回転するパネルのサンプルを作ってみました。手法としては比較的知ってる人も多いかもしれませんが自分用備忘録として。回転変形おもしろーい複数を配置してみるHTMLCSSスポンサーリンク回転変形おもしろーいベースとなるHTMLはこちら。1</a></p>はい、1行ソースです、すみません。単純に【p】の中に【a】を内包しているだけ。rotateZ(180deg);}こんなCSSを適用してみます。サンプルページパネルにマウスカーソルを合わせるとくるりと回転します(オマケで背景色も変化させてます)。静止画じゃわかりにくいんで実際にサンプルページを見てもらえるとわかりやすいと思います(OperaやIEの古いバージョンでは動作しないかも)。解説というほどのことでもないですがちょっとだけ補足。【a】は【p】に内包されていていずれもCSSでブロックにしています。a】に設定した【transform:rotate~】で行っています。rotateXなら水平線を軸に縦回転、rotateYなら垂直線を軸に横回転、rotateZならディスプレイに直角な軸を中心に画面上で回転します。回転角度は時計回りにdeg(°)で指定します。このサンプルのようにrotateX,Y,Zを複数あわせて使うこともできます。様々な変形を要素に与えることができますがここでは割愛。あと変形に要する時間とタイミングは【transition】で指定します。今回のサンプルソースのミソは、変形(回転)するのは【p】全体ではなく【a】だけということ。a】に記述していること。仮に【p】全体を変形させてしまうと、変形にともなってhover領域も変わってしまいマウスポインタの位置によってはスムーズにアニメーションせず途中の工程でカクカク往復したりおかしなことになっちゃいます。a(p:hoverの子孫のa)】にしておくことで、マウスポインタの位置に関係なくきちんとアニメーションしてくれるようになります。スポンサーリンク複数を配置してみるこういうの単体で用いるとイマイチ使いどころが思いつかなかったり、無理して盛り込むとそこだけ浮いた演出になっちゃいますが、同じ効果のパネルを並べると使い方をイメージしやすいかと思いそんなサンプルも。9</a></p></div>先ほどと同じ【p】に【a】を内包するものを複数書いてさらに全体を【div】で囲んでいます。rotateZ(180deg);}基本的に最初のサンプルのCSSとやってることは変わりません。【div】の領域を設定して【p】にfloatをかけグリッド状に並べたものです。サンプルページこうするとグリッド全体がある一定のルールに基づく動作をする一つのパネルとして認識しやすいと思うのですがいかがでしょうか。他のデザイン要素との調和が必要なんでしょうけどね。いうことでちょっと面白そうだと思ったのでサンプルを書いて見たんですがいかがでしょうか。BLOG関連記事HTML/CSSコーディングCSSだけでスマホでも使えそうなスライドインするメニューを考えてみた一週間ほど鼻水が止まらず、咳までで出したごろどくです、どうも。北海道ではまだ花粉の時期ではないので花粉症ではないのですが、ここ数年毎年この時期には同じような症状で体調崩してる気がします。年度末の気の緩みでしょうか。いう記事が話題になってまして、ブラウザをメモ帳代わりにするっていうお話なんですが...いろいろ調べてるうちにブラウザ上で動作するエディタができちゃいました。...HTML/CSSコーディングCSSのみ画像不要のストライプ背景の作り方を若干丁寧に解説してみる縦ボーダーのシャツを着ても縞のゆがみなんて全く気にならないガリのゴロドクさんです、どうも。CSSで作る吹き出しの記事がなかなか評判良かった(WEBクリエイターボックスさんにツイとFBで拡散されて見たことのない時間PVになりました。空き地に放置された...一昔前にahaムービーって流行りましたよね。時間かけてちょっとずつ変化する画像、どこが変わってるかわかりますか?ってやつ。脳科学者の茂木健一郎さんがテレビ出だした頃からですよね。あれっぽいやつCSSで作ってみたのでどうぞ。HTML/CSSコーディングCSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみるWEBページの演出で吹き出しの中にテキストが入ってるのをよく見かけますが、あれのやり方をかなり最近まで知らなかったゴロドクさんです、どうも。Lint」が昨年(2011年)10月中旬頃よりHTML5に対応しています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(1)スポンサーリンクタイトルとURLをコピーしました。