pettanR

css3 transform による 画像の水平・垂直反転のテストページ

このページは css3 transform による画像反転のためのテストページです．

ブラウザによる画像の反転方法は、Web標準を使うもの、非Web標準な独自実装やプラグインを使うものなどいくつかあります．

このなかで transform による画像反転が（おそらく）もっとも平易なもので、 ぺったんR での画像反転表示の本命となります．

filter 指定に関する注意

ie9 以下で ActiveX が有効の場合に使用できる filter 指定による 画像反転も併記されています．filter 指定は ie の独自実装のため使用の際には注意が必要です．

Opera に関する注意

Opera の transform のサポート開始は 10.5 以降とされますが、scale( -1, -1) については Opera 11.5 以降となるみたいです．その間は rotate(180deg) によって flip-vh ( 水平垂直方向に反転 ) のみ transform で行えるようです．

Original Image

flip-h 水平方向に反転

css source

	.img-flip-h {
		transform:			scale( -1, 1);
		-o-transform:			scale( -1, 1);
		-ms-transform:			scale( -1, 1);
		-moz-transform:			scale( -1, 1);
		-webkit-transform:		scale( -1, 1);
		filter:				fliph();
		-ms-filter:			fliph();
	}
					

ie では このほかに以下のような書き方もある．

	filter:			progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);
	-ms-filter:		progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);
					

flip-v 垂直方向に反転

css source

	.img-flip-v {
		transform:			scale( 1, -1);
		-o-transform:			rotate(180deg) scale(-1);
		-ms-transform:			scale( 1, -1);
		-moz-transform:			scale( 1, -1);
		-webkit-transform:		scale( 1, -1);
		filter:				flipv();
		-ms-filter:			flipv();
	}
					

ie では このほかに以下のような書き方もある．

	filter:			progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);
	-ms-filter:		progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);
					

flip-vh 水平垂直方向に反転 または 180度回転

css source

	.img-flip-vh {
		transform:			scale( -1, -1);
		-o-transform:			rotate(180deg);
		-ms-transform:			scale( -1, -1);
		-moz-transform:			scale( -1, -1);
		-webkit-transform:		scale( -1, -1);
		filter:				flipv() fliph();
		-ms-filter:			flipv() fliph();
	}
					

ie では このほかに以下のような書き方もある．

	filter:			progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);
	-ms-filter:		progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);