要素を丸ごと回転させる

CSS3の「transform」プロパティに「rotate」で角度を指定して文字単位や画像単位だけではなく、「画像や文字やその他の装飾をすべて含んだボックス」をそのまま任意の角度で回転させることが出来ます。
平面での回転は下記のとおりです。

transform: rotate( 角度 );

「角度」は、単位「deg」を利用して数値で指定します。例えば「45deg」だと時計回りに45度、「-45deg」だと反時計回りに45度になります。

またrotateをrotateX、rotateY、rotateZに書き換えるとそれぞれX軸、Y軸、Z軸で回転させることが出ます。

サンプル

HTML

<div class="sample"><img src=".画像URL" width="400" height="268" ><p>サンプル</p></div>

CSS

div.sample{
　width:400px;
　position: relative;
　overflow:hidden ;
}
div.sample p{
　color:white ;
　background-color:red ;
　padding: 50px 0 10px;
　width: 150px;
　text-align:center ;
　transform: rotate(-45deg);
　position: absolute ;
　top:-25px;
　left:-55px;
}