yes-68480_640

transform プロパティは、Transform 関数を用いていろいろな変形をさせることのできるものです。今回ご紹介する傾きのほかにも拡大縮小などもあります。

「Transform: rotate」を使う

まずは、デモをご覧ください。

対応ブラウザ Google Chrome / Safari 5 up/ Firefox 3.5 up/ Opera 11 up

基本的な構文は下記の様になってます。

回転させる角度は1つだけで、angle 形式で指定、回転の方向は時計回りです。

文字を傾けてみる

画像にマウスが乗ったとき傾く

傾きをつかってBOXを重ねる

上記のデモは、こちらからダウンロードできます。

Transformのサンプルをダウンロード

transform-originプロパティ

傾きをつかってBOXを重ねるでは、transform : rotateともう1つtransform-originプロパティを使用しています。 transform-originプロパティは、変形の原点を指定することができるプロパティです。 詳細はこちらを参考にされるととてもわかりやすいいかなと思います。

transform(傾き)をIE6-8に対応させる

IE6-8でもこれが出来るにはどうしたらいいのかなぁと色々と検索していたところこれに出会いました。

JavaScript を使って、傾きを表現するようです。

cssSandpaper

こちらからdownloading the archiveをダウンロード

JavaScriptをheader内に記述します。

他にも、これを使うと

  • text-shadow
  • box-shadow
  • gradient
  • opacity

が、IE6-8で使用できるようです。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る