ＣＳＳ３　画像の傾き

★　ＣＳＳ３　画像の傾き

●　条件

①　ＣＳＳ３はＩＥ８やＩＥ7では機能しないので注意してください。
②　この記事での説明は、現在の各ブラウザでの最新バージョンでの
　　状態でテストしています。
③　ブラウザは下記

CSS3 Firefox etc. 　　　　・・・本来のＣＳＳ３
Firefox(old Ver) mozilla　・・・ Firefoxの古いバーション
Safari and Chrome　　　　　・・・サファリ、クロームの最新バージョン
Opera　　　　　　　　　　　・・・オペラの最新バージョン
IE9 IE10　　　　　　　　　・・・私のＰＣには入れていないので確認できない。

●　プレフィックス（頭につきます）

-moz-　　・・・ Firefox
-webkit-　・・・ Safari　Google Chrome
-o-　　　・・・ Opera
-ms-　　　・・・ Internet Explorer
なし　　　・・・ＣＳＳ３（現在 FireFox 16.0.2 ではこれが適用されています)

●　この記事で紹介するＣＳＳ３の機能

①　画像を角度を指定して、斜めに配置します。
②　角度によっては、色々と可能。

●　やり方

①　下記をＣＳＳの一番下に追加します。（右に５度傾ける。５度は調整すること。）
　　記事内の全画像対象

/* --------------------------------------------------------- */

/* 画像の傾き　ＣＳＳ３　　５度（右下がり）　　　　　　　　　*/

/* --------------------------------------------------------- */

a.detailOn img{

-moz-transform:    rotate(5deg);/* Firefox(old Ver) mozilla */

-webkit-transform: rotate(5deg);/* Safari and Chrome        */

-o-transform:      rotate(5deg);/* Opera                    */

-ms-transform:     rotate(5deg);/* IE9 IE10                 */

transform:         rotate(5deg);/* CSS3 Firefox etc.        */

}

②　下記をＣＳＳの一番下に追加します。（左に５度傾ける。５度は調整すること。）
　　記事内の全画像対象

/* --------------------------------------------------------- */

/* 画像の傾き　ＣＳＳ３　　５度（左下がり）　　　　　　　　　*/

/* --------------------------------------------------------- */

a.detailOn img{

-moz-transform:    rotate(-5deg);/* Firefox(old Ver) mozilla */

-webkit-transform: rotate(-5deg);/* Safari and Chrome        */

-o-transform:      rotate(-5deg);/* Opera                    */

-ms-transform:     rotate(-5deg);/* IE9 IE10                 */

transform:         rotate(-5deg);/* CSS3 Firefox etc.        */

}

③　下記をＣＳＳの一番下に追加します。（右に５度傾ける。５度は調整すること。）
　　記事内の指定した画像のみ対象（#i11724442258　は、#i画像番号)

/* --------------------------------------------------------- */

/* 画像の傾き　ＣＳＳ３　　５度（右下がり）　　　　　　　　　*/

/* --------------------------------------------------------- */

#i11724442258 img{

-moz-transform:    rotate(5deg);/* Firefox(old Ver) mozilla */

-webkit-transform: rotate(5deg);/* Safari and Chrome        */

-o-transform:      rotate(5deg);/* Opera                    */

-ms-transform:     rotate(5deg);/* IE9 IE10                 */

transform:         rotate(5deg);/* CSS3 Firefox etc.        */

}

④　下記をＣＳＳの一番下に追加します。（左に５度傾ける。５度は調整すること。）
　　記事内の指定した画像のみ対象（#i11724442258　は、#i画像番号)

/* --------------------------------------------------------- */

/* 画像の傾き　ＣＳＳ３　　５度（左下がり）　　　　　　　　　*/

/* --------------------------------------------------------- */

#i11724442258 img{

-moz-transform:    rotate(-5deg);/* Firefox(old Ver) mozilla */

-webkit-transform: rotate(-5deg);/* Safari and Chrome        */

-o-transform:      rotate(-5deg);/* Opera                    */

-ms-transform:     rotate(-5deg);/* IE9 IE10                 */

transform:         rotate(-5deg);/* CSS3 Firefox etc.        */

}

●　画像の番号の求め方

①　記事を書くまたは記事の編集で画像のＵＲＬを求めます

②　下記のような画像のＵＲＬが求まります。

http://stat.ameba.jp/user_images/20120421/08/new-blue-777/74/7e/j/t02200165_0800060011927554723.jpg

③　最後の下記部分に注目。

　　0800 は画像の幅
　　0600 は画像の高さ
　　11927554723　は画像番号

0800060011927554723.jpg

④　#i画像番号がIDになります。

#i11927554723 img{

●　傾きを基本にして行う場合

■　各角度のCSSを事前に作成しておいて、記事を書くときに、
　　画像のHTMLを修正（クラスを追加）します。

①　CSSへ下記の様に追加します

/* --------------------------------------------------------- */

/* 画像の傾き　ＣＳＳ３　　５度（左下がり）　　　　　　　　　*/

/* --------------------------------------------------------- */

img.rotate_5deg {

-moz-transform:    rotate(5deg);/* Firefox(old Ver) mozilla */

-webkit-transform: rotate(5deg);/* Safari and Chrome        */

-o-transform:      rotate(5deg);/* Opera                    */

-ms-transform:     rotate(5deg);/* IE9 IE10                 */

transform:         rotate(5deg);/* CSS3 Firefox etc.        */

}

②　傾き５度にしたい記事などの画像に対して、
　　HTMLタグを表示して、画像のHTML部分に下記の様に
　　 class="rotate_5deg" を　img タグ部分に入れます。
　　（ img タグ内であればどこでもOKです）

<a href="http://stat.ameba.jp/user_images/20121107/06/new-blue-777/8d/08/j/o0800060012274324362.jpg"><img border="0" class="rotate_5deg" src="http://stat.ameba.jp/user_images/20121107/06/new-blue-777/8d/08/j/t02200165_0800060012274324362.jpg" alt="リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）" /></a>

③　実例

●　画像の傾き例　（90deg)・・・90度

●　画像の傾き例　（180deg)・・・180度

●　画像の傾き例　（260deg)・・・260度

●　画像の傾き例　（360deg)・・・360度

●　画像の傾き例のＨＴＭＬＣＳＳ

①　ＨＴＭＬ部分

<img border="0" src="http://stat.ameba.jp/user_images/20121107/02/new-blue-777/d5/46/j/t02200165_0800060012274278425.jpg" id="CSS3_img001" />

<img border="0" src="http://stat.ameba.jp/user_images/20121107/02/new-blue-777/d5/46/j/t02200165_0800060012274278425.jpg" id="CSS3_img002" />

<img border="0" src="http://stat.ameba.jp/user_images/20121107/02/new-blue-777/d5/46/j/t02200165_0800060012274278425.jpg" id="CSS3_img003" />

<img border="0" src="http://stat.ameba.jp/user_images/20121107/02/new-blue-777/d5/46/j/t02200165_0800060012274278425.jpg" id="CSS3_img004" />

②　ＣＳＳ部分

img#CSS3_img001 {

-moz-transform:    rotate(90deg);/* Firefox(old Ver) mozilla */

-webkit-transform: rotate(90deg);/* Safari and Chrome        */

-o-transform:      rotate(90deg);/* Opera                    */

-ms-transform:     rotate(90deg);/* IE9 IE10                 */

transform:         rotate(90deg); /* CSS3 Firefox etc.       */

}

img#CSS3_img002 {

-moz-transform:    rotate(180deg);/* Firefox(old Ver) mozilla */

-webkit-transform: rotate(180deg);/* Safari and Chrome        */

-o-transform:      rotate(180deg);/* Opera                    */

-ms-transform:     rotate(180deg);/* IE9 IE10                 */

transform:         rotate(180deg);/* CSS3 Firefox etc.        */

}

img#CSS3_img003 {

-moz-transform:    rotate(260deg);/* Firefox(old Ver) mozilla */

-webkit-transform: rotate(260deg);/* Safari and Chrome        */

-o-transform:      rotate(260deg);/* Opera                    */

-ms-transform:     rotate(260deg);/* IE9 IE10                 */

transform:         rotate(260deg);/* CSS3 Firefox etc.        */

}

img#CSS3_img004 {

-moz-transform:    rotate(360deg);/* Firefox(old Ver) mozilla */

-webkit-transform: rotate(360deg);/* Safari and Chrome        */

-o-transform:      rotate(360deg);/* Opera                    */

-ms-transform:     rotate(360deg);/* IE9 IE10                 */

transform:         rotate(360deg);/* CSS3 Firefox etc.        */

}

ＣＳＳ３ 画像の傾き

ＣＳＳ３　画像の傾き