参考記事
http://ameblo.jp/new-blue-777/entry-11398426139.html
● 説明
① CSS3はIE8やIE7では機能しないので注意してください。
② CSS3のtransform:rotate();を利用して画像とテキストの傾きをシュミレーションします。
③ セレクタ名(場所の名前)の入力が必要です。
セレクタ名(場所の名前)はセレクタ名とします。
セレクタ名(場所の名前)の最初の1文字は英字としてそれ以外は英数字、記号とします。
④ CSSは一番最後に追加します。
⑤ 個別に指定する場合は下記の様にHTMLにクラスを指定します。
・画像の場合の例
<img src="画像のURL" class="セレクタ名">
・テキストの場合の例
<span class="セレクタ名">文字列</span>
● transform:rotate(); の内容
transform:rotate(回転角度);
transform:rotateX(X軸回転角度);
transform:rotateY(Y軸回転角度);
transform:rotateZ(Z軸回転角度);
transform:rotate3d(数値X, 数値Y, 数値Z, 回転角度);
凡例:回転角度は時計回りの回転角度を指定(例 10deg)
数値X、Y、Zはそれぞれの方向のベクトルの数値
例 ・・・ セレクタ名 abc で rotate 10 を指定した結果
.abc{
-moz-transform:rotate(10deg);/* Firefox(old Ver) mozilla */
-webkit-transform:rotate(10deg);/* Safari and Chrome */
-o-transform:rotate(10deg);/* Opera */
-ms-transform:rotate(10deg);/* IE9 IE10 */
transform:rotate(10deg);/* CSS3 Firefox etc. */
}
もし、画像の場合は、セレクタ名を下記の様にします。
img.abc{
もし、画像にカーソルを乗せた時の変化の場合は、セレクタ名を下記の様にします。
img.abc:hover{