タグ

2015年9月3日のブックマーク (2件)

  • CSSで画像や文字を回転させる方法!transformプロパティ [ホームページ作成] All About

    CSSで画像や文字を回転させる方法!transformプロパティCSSで画像や文字を回転させる方法を解説。CSSのtransformプロパティを使うと、HTMLに書いた要素を45度でも90度でも自由な角度で回転できます。transformの値にrotateを使えば2D(平面)で傾けられ、rotateXなどを使えばX軸・Y軸・Z軸を基準に3D(立体)で回転できます。Y軸で中心から180度反転させれば鏡文字も簡単に作れます。何かを回転させるCSSの書き方をご紹介。 CSSのtransformプロパティなら、画像や文字を丸ごと回転できる ウェブ上の文字や画像を90度回転させたければ、全体を画像化して加工するくらいしか方法がないと思われるかもしれません。また、文字や画像を45度だけ回転させたり上下や左右をひっくり返したりしたければ、やはり画像として加工するしか方法がないと思われるかもしれません。し

    CSSで画像や文字を回転させる方法!transformプロパティ [ホームページ作成] All About
  • 【CSS3】全ブラウザ対応! CSS3 で作る marquee の実装。

    HTML5からは非推奨(廃止?)となり、今となっては懐かしい<marquee> タグ。 内包する要素をスライドさせて表示することができるこのタグは、一時は廃れたかのように見えましたが、最近再び見直されるようになり、同じ動作をするスクリプトが一部のスマートフォン対応サイトなどで使われています。 <marquee> タグが使えないとなると、同じ挙動は JavaScript で実現させようと考えるのが普通でしょうが、今日は CSS3 で marquee を実装する方法を紹介します。 HTML の書き方<div class="marquee"> <p>The quick brown fox jumps over the lazy dog.</p> </div> 「marquee」というクラスを与えたボックスでスライドさせたい要素を囲む。これが基の記述です。 シンプルでいいですよね。 こういった簡

    【CSS3】全ブラウザ対応! CSS3 で作る marquee の実装。