★CSS3リファレンス
image-orientationプロパティは、横向きや逆さまの画像を回転させて正しい向きに補正する際に使用します。
カメラを横にして撮影した場合などに、結果として得られる画像が横向きや逆さまになることがあります。 image-orientationプロパティは、そのような向きが適切ではない画像を正しい位置に回転させて補正するためのプロパティです。
image-orientationプロパティは画像の向きを正しい位置に補正するものであり、画像を任意の位置に回転させることが目的ではありません。 そのため、例えば 18度、60度、135度、210度、350度などの中途半端な角度指定をしても、 0度、90度、180度、270度、360度にまるめられて回転が適用されます。
image-orientationプロパティを使用して画像を回転させた場合、 回転前ではなく回転後の画像の高さと幅がその画像の高さと幅となります。 また、画像に背景色などを設定している場合にはその背景ごと回転されます。 つまり、もとから回転後の状態の画像であったかのように扱われるということです。
画像を任意の位置に回転させる目的には、 transformプロパティ の transform:rotate() などを使用してください。
■値
- 角度
- 数値にdegなどの単位を付けて角度を指定。 正の値を指定すると画像は時計回りに回転し、負の値を指定すると反時計回りに回転する（初期値は0deg）
■初期値・適用対象・値の継承
- 初期値
- 0deg
- 適用対象
- すべての要素
- 値の継承
- する
■使用例
CSSソースは外部ファイル（sample.css）に記述
img.sample1 {image-orientation: 0deg;}img.sample2 {image-orientation: 90deg;}
img.sample3 {image-orientation: 180deg;}
img.sample4 {image-orientation: 270deg;}
img.sample5 {image-orientation: 60deg;}
HTMLソース
<p>image-orientation: 0deg; を指定<br>
<img class="sample1" src="../images/kaeru.gif">
</p>
<p>
image-orientation: 90deg; を指定<br>
<img class="sample2" src="../images/kaeru.gif">
</p>
<p>
image-orientation: 180deg; を指定<br>
<img class="sample3" src="../images/kaeru.gif">
</p>
<p>
image-orientation: 270deg; を指定<br>
<img class="sample4" src="../images/kaeru.gif">
</p>
<p>
image-orientation: 60deg; を指定<br>
<img class="sample5" src="../images/kaeru.gif">
</p>
ブラウザ上の表示
image-orientation: 0deg; を指定
image-orientation: 90deg; を指定
image-orientation: 180deg; を指定
image-orientation: 270deg; を指定
image-orientation: 60deg; を指定
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
img.prefix_sample1 {-moz-image-orientation: 0deg;
-webkit-image-orientation: 0deg;
-o-image-orientation: 0deg;
-ms-image-orientation: 0deg;
}
img.prefix_sample2 {
-moz-image-orientation: 90deg;
-webkit-image-orientation: 90deg;
-o-image-orientation: 90deg;
-ms-image-orientation: 90deg;
}
img.prefix_sample3 {
-moz-image-orientation: 180deg;
-webkit-image-orientation: 180deg;
-o-image-orientation: 180deg;
-ms-image-orientation: 180deg;
}
img.prefix_sample4 {
-moz-image-orientation: 270deg;
-webkit-image-orientation: 270deg;
-o-image-orientation: 270deg;
-ms-image-orientation: 270deg;
}
img.prefix_sample5 {
-moz-image-orientation: 60deg;
-webkit-image-orientation: 60deg;
-o-image-orientation: 60deg;
-ms-image-orientation: 60deg;
}
HTMLソース
<p>image-orientation: 0deg; を指定<br>
<img class="prefix_sample1" src="../images/kaeru.gif">
</p>
<p>
image-orientation: 90deg; を指定<br>
<img class="prefix_sample2" src="../images/kaeru.gif">
</p>
<p>
image-orientation: 180deg; を指定<br>
<img class="prefix_sample3" src="../images/kaeru.gif">
</p>
<p>
image-orientation: 270deg; を指定<br>
<img class="prefix_sample4" src="../images/kaeru.gif">
</p>
<p>
image-orientation: 60deg; を指定<br>
<img class="prefix_sample5" src="../images/kaeru.gif">
</p>
ブラウザ上の表示
image-orientation: 0deg; を指定
image-orientation: 90deg; を指定
image-orientation: 180deg; を指定
image-orientation: 270deg; を指定
image-orientation: 60deg; を指定
Sponsors
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
