コピー2013.02.14HTML/CSSコーディング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をかけグリッド状に並べたものです。サンプルページこうするとグリッド全体がある一定のルールに基づく動作をする一つのパネルとして認識しやすいと思うのですがいかがでしょうか。他のデザイン要素との調和が必要なんでしょうけどね。いうことでちょっと面白そうだと思ったのでサンプルを書いて見たんですがいかがでしょうか。コピーgorodokuをフォローする0gorodokuこの記事を読んだ人はこんな記事も読んでいます。GIGA...HTML/CSSコーディングCSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみるWEBページの演出で吹き出しの中にテキストが入ってるのをよく見かけますが、あれのやり方をかなり最近まで知らなかったゴロドクさんです、どうも。プログラミング学習動画サイト『ドットインストール』ウェブ界隈のツイッタラーさんには今さらな話のような気もするけど、多分世の中にはこれ知らない人たくさんいると思うのでぜひ知っていただきたいと思いご紹介。花に囲まれた洋館CSSでつくるahaムービーその2。前回よりさらに難易度低し。Lint」が昨年(2011年)10月中旬頃よりHTML5に対応しています。いう記事が話題になってまして、ブラウザをメモ帳代わりにするっていうお話なんですが...いろいろ調べてるうちにブラウザ上で動作するエディタができちゃいました。背景画像のサイズ調整をする方法とあるページのコーディングをしていて演出部分でやりたいことを実現する方法がわからず調べてみたら、知らなかったCSSプロパティを見つけました。ウェブ界隈一般では周知されてるかもしれませんが自分用のメモということで。HTML/CSSコーディング画像不要CSSだけで作るテキストロゴデザインのTipsWebサイトのロゴタイプといえばPhotoShopを初めとした画像ソフトを用いて作るのが一般的な気もしますが、シンプルなものならCSSのプロパティを指定するだけでも作れたりします。今回はそのサンプルとフォント関係で使うCSSプロパティいくつ...HTML/CSSコーディングファビコン付けるにあたってコーディングで困ったことのメモコンテンツと関係ないから後回しでいいや、と思ってずっと放置しておいたファビコンをとりあえず付けてみました。画像作ってiconファイルに変換してメタタグ1行コード付け足せばいいや...と簡単に考えてたんですが、なぜか上手く表示されない。その辺の...HTML/CSSコーディングWindowsでWebコーディング→Notepad++使えば良いとおもうよ!まったく、マイクロソフトはWindows8になってさえ未だ標準のテキストエディタは「メモ帳」。ないに等しく、もうちょっとなんとかならんもんですかね...と思ってるのは私だけではないでしょう。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。BLOG検索タイトルとURLをコピーしました。