transform プロパティは、Transform 関数を用いていろいろな変形をさせることのできるものです。今回ご紹介する傾きのほかにも拡大縮小などもあります。
「Transform: rotate」を使う
まずは、デモをご覧ください。
対応ブラウザ
Google Chrome / Safari 5 up/ Firefox 3.5 up/ Opera 11 up
基本的な構文は下記の様になってます。
|
1 |
transform: rotate('回転させる角度'); |
回転させる角度は1つだけで、angle 形式で指定、回転の方向は時計回りです。
文字を傾けてみる
|
1 2 3 4 5 6 7 |
.title h1{ -webkit-transform: rotate(25deg); -moz-transform : rotate(25deg); -ms-transform : rotate(25deg); -o-transform : rotate(25deg); transform : rotate(25deg); } |
画像にマウスが乗ったとき傾く
|
1 2 3 |
<div class="box4"> <img src="image.jpg" alt="Picture"/> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
width:300px; height:225px; padding:15px; background-color:rgba(0,0,0,.75); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; margin-bottom: 100px; } .box4 img{ border:1px solid #FFF; box-shadow: 5px 5px 5px rgba(255,255,255,0.25); -moz-box-shadow: 5px 5px 5px rgba(255,255,255,0.25); -webkit-box-shadow: 5px 5px 5px rgba(255,255,255,0.25); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .box4:hover{ -webkit-transform: rotate(-15deg); -moz-transform : rotate(-15deg); -ms-transform : rotate(-15deg); -o-transform : rotate(-15deg); transform : rotate(-15deg); } .box4:hover img{ -webkit-transform: rotate(30deg); -moz-transform : rotate(30deg); -ms-transform : rotate(30deg); -o-transform : rotate(30deg); transform : rotate(30deg); } |
傾きをつかってBOXを重ねる
|
1 2 3 4 5 6 |
<div class="box"> <h3>Transformsを利用したBOX</h3> <p>Transformsを利用したBOX Transformsを利用したBOX</p> </div> <div class="box box2"></div> <div class="box box3"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
width:300px; height:300px; background-color:rgba(0,0,0,.85); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; position: absolute; z-index:3; } .box2{ background-color:rgba(0,0,0,.5); z-index:2; -webkit-transform: rotate(15deg); -moz-transform : rotate(15deg); -ms-transform : rotate(15deg); -o-transform : rotate(15deg); transform : rotate(15deg); -webkit-transform-origin: 2% 99%; -moz-transform-origin : 2% 99%; -ms-transform-origin : 2% 99%; -o-transform-origin : 2% 99%; transform-origin : 2% 99%; } .box3{ background-color:rgba(0,0,0,.25); z-index:1; -webkit-transform-origin: 2% 98%; -moz-transform-origin : 2% 98%; -ms-transform-origin : 2% 98%; -o-transform-origin : 2% 98%; transform-origin : 2% 98%; -webkit-transform: rotate(32deg); -moz-transform : rotate(32deg); -ms-transform : rotate(32deg); -o-transform : rotate(32deg); transform : rotate(32deg); } |
上記のデモは、こちらからダウンロードできます。
Transformのサンプルをダウンロード
transform-originプロパティ
傾きをつかってBOXを重ねるでは、transform : rotateともう1つtransform-originプロパティを使用しています。 transform-originプロパティは、変形の原点を指定することができるプロパティです。 詳細はこちらを参考にされるととてもわかりやすいいかなと思います。
transform(傾き)をIE6-8に対応させる
IE6-8でもこれが出来るにはどうしたらいいのかなぁと色々と検索していたところこれに出会いました。
JavaScript を使って、傾きを表現するようです。
cssSandpaper
こちらからdownloading the archiveをダウンロード
JavaScriptをheader内に記述します。
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript" src="/js/EventHelpers.js"> </script> <script type="text/javascript" src="/js/cssQuery-p.js"> </script> <script type="text/javascript" src="/js/jcoglan.com/sylvester.js"> </script> <script type="text/javascript" src="/js/cssSandpaper.js"> </script> |
|
1 |
-sand-transform: rotate('回転させる角度'); |
他にも、これを使うと
- text-shadow
- box-shadow
- gradient
- opacity
が、IE6-8で使用できるようです。
