参考記事
http://ameblo.jp/new-blue-777/entry-11398426139.html
● 説明
① ＣＳＳ３はＩＥ８やＩＥ7では機能しないので注意してください。
② ＣＳＳ３のtransform:rotate();を利用して画像とテキストの傾きをシュミレーションします。
③ セレクタ名（場所の名前）の入力が必要です。
セレクタ名（場所の名前）はセレクタ名とします。
セレクタ名（場所の名前）の最初の１文字は英字としてそれ以外は英数字、記号とします。
④ ＣＳＳは一番最後に追加します。
⑤ 個別に指定する場合は下記の様にＨＴＭＬにクラスを指定します。
・画像の場合の例
<img src="画像のＵＲＬ" class="セレクタ名">
・テキストの場合の例
<span class="セレクタ名">文字列</span>
● transform:rotate(); の内容
transform:rotate(回転角度);
transform:rotateX(X軸回転角度);
transform:rotateY(Y軸回転角度);
transform:rotateZ(Z軸回転角度);
transform:rotate3d(数値X, 数値Y, 数値Z, 回転角度);
凡例：回転角度は時計回りの回転角度を指定(例 10deg)
数値Ｘ、Ｙ、Ｚはそれぞれの方向のベクトルの数値
例 ・・・ セレクタ名 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{