△森内 | 9 | 8 | 7 | 6 | 5 | 4 | 3 | 2 | 1 | ▲深浦 | |
飛 | 桂 | 香 | 一 | ||||||||
香 | 玉 | 金 | 二 | ||||||||
銀 | 桂 | 金 | 銀 | 角 | 歩 | 三 | |||||
歩 | 歩 | 歩 | 歩 | 四 | |||||||
歩 | 歩 | 歩 | 歩 | 歩 | 五 | ||||||
歩 | 歩 | 歩 | 歩 | 歩 | 六 | ||||||
歩 | 金 | 歩 | 七 | ||||||||
香 | 銀 | 金 | 角 | 飛 | 八 | ||||||
玉 | 桂 | 銀 | 桂 | 香 | 九 |
実際に使う場合はクラスの指定などをすればスマートに書けるはず。
IE8とFirefox3.6.9とChrome6で確認。Safariでもいけると思う。Operaはダメだった。
/*各ブラウザで文字を逆さに表示させるCSS*/ /*Internet Explorer*/ filter:progid:DXImageTransform.Microsoft.Matrix(M11=-1, M22=-1, sizingMethod='auto expand'); /*Safari, Google Chrome(WebKit)*/ -webkit-transform: rotate(180deg); /*Firefox*/ -moz-transform: rotate(180deg);
関連リンク
CSS3のtransform:rotateおぼえがき -
CSS3+Javascriptでテキストベースの将棋盤麺表示 - プログラミング練習帳&備忘録