2010年12月21日


CSS : 文字の回転と反転 ( matrix )

IE だけ勝手が違います。
そもそも、IE のMatrix は、IE5.5 の時からあるので、
座標系が CSS3系 とは違うようです。でも、IE9 を使えない OS をまだ
当分使わないといけないので、このようになるのは仕方無いと思います。
海を90度回転しています
海を180度回転しています
海を270度回転しています
海を横反転しています
海を横反転して90度回転しています
海を横反転して180度回転しています
海を横反転して270度回転しています
海を45度回転しています
<style type="text/css">
.mtx {
	display:block;
	font-size:16px;
	width:16px;
}
.rotation90 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, -1, 1, 0, 0, 0);
	-webkit-transform:matrix(0, -1, 1, 0, 0, 0);
	-o-transform:matrix(0, -1, 1, 0, 0, 0);
	transform:matrix(0, -1, 1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotation180 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(-1, 0, 0, -1, 0, 0);
	-webkit-transform:matrix(-1, 0, 0, -1, 0, 0);
	-o-transform:matrix(-1, 0, 0, -1, 0, 0);
	transform:matrix(-1, 0, 0, -1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rotation270 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, 1, -1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, -1, 0, 0, 0);
	-o-transform:matrix(0, 1, -1, 0, 0, 0);
	transform:matrix(0, 1, -1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.mirror {
	/* 横反転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(-1, 0, 0, 1, 0, 0);
	-webkit-transform:matrix(-1, 0, 0, 1, 0, 0);
	-o-transform:matrix(-1, 0, 0, 1, 0, 0);
	transform:matrix(-1, 0, 0, 1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}
.mirror90 {
	/* 横反転90 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, 1, 1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, 1, 0, 0, 0);
	-o-transform:matrix(0, 1, 1, 0, 0, 0);
	transform:matrix(0, 1, 1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1,mirror=1);
}
.mirror180 {
	/* 横反転180 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(1, 0, 0, -1, 0, 0);
	-webkit-transform:matrix(1, 0, 0, -1, 0, 0);
	-o-transform:matrix(1, 0, 0, -1, 0, 0);
	transform:matrix(1, 0, 0, -1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=1);
}
.mirror270 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, -1, -1, 0, 0, 0);
	-webkit-transform:matrix(0, -1, -1, 0, 0, 0);
	-o-transform:matrix(0, -1, -1, 0, 0, 0);
	transform:matrix(0, -1, -1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3,mirror=1);
}
.rotation45 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	-webkit-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	-o-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.707,M12=0.707,M21=-0.707,M22=0.707,Dx=-2,Dy=8);
}
</style>

<table>
<tr>
<td><span class='mtx rotation90'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を90度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation180'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を180度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation270'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を270度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転しています</td>
</tr>
<tr>
<td><span class='mtx mirror90'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して90度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror180'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して180度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror270'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して270度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation45'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を45度回転しています</td>
</tr>
</table>
文字回転CSS ( 含IE9 ) では、IE9 に対応したSPAN を使った文字列内
の一部分回転を行っています。



posted by at 2010-12-21 15:51 | Comment(0) | 小ネタ | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Loading
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。