pettanR 0.4.3

[pettanr/clientJs.git] / 0.4.x / test / transform.html

diff --git a/0.4.x/test/transform.html b/0.4.x/test/transform.html
index a96ec6b..64be716 100644 (file)
--- a/0.4.x/test/transform.html
+++ b/0.4.x/test/transform.html
@@ -32,12 +32,22 @@
             <div id="inner-wrapper" class="base-content-width">\r
                                <!-- InstanceBeginEditable name="main_content" -->\r
                                <div id="main">\r
+                                       <h2>css3 transform による 画像の水平・垂直反転のテストページ</h2>\r
+                                       <p>このページは css3 transform による画像反転のためのテストページです．</p>\r
+                                       <p>ブラウザによる画像の反転方法は、Web標準を使うもの、非Web標準な独自実装やプラグインを使うものなどいくつかあります．</p>\r
+                                       <p>このなかで transform による画像反転が（おそらく）もっとも平易なもので、 ぺったんR での画像反転表示の本命となります．</p>\r
+                                       \r
+                                       <h3>filter 指定に関する注意</h3>\r
+                                       <p>ie9 以下で ActiveX が有効の場合に使用できる filter 指定による 画像反転も併記されています．filter 指定は ie の独自実装のため使用の際には注意が必要です．</p>\r
+                                       \r
+                                       <h3>Opera に関する注意</h3>\r
+                                       <p>Opera の transform のサポート開始は 10.5 以降とされますが、scale( -1, -1) については Opera 11.5 以降となるみたいです．その間は rotate(180deg) によって flip-vh ( 水平垂直方向に反転 ) のみ transform で行えるようです．</p>\r
                                        <h2>Original Image</h2>\r
                                        <div class="clearfix">\r
                                                <img src="1.gif" class="float-left" width="200" height="200" alt="" title="">\r
                                                <p>オリジナルの画像です．</p>\r
-                                               <p>flip が Opera11.5 以上でないと動いていない、、、</p>\r
                                        </div>\r
+                                       \r
                                        <h2>flip-h 水平方向に反転</h2>\r
                                        <div class="clearfix">\r
                                                <img src="1.gif" class="img-flip-h float-left" width="200" height="200" alt="" title="">\r
@@ -47,7 +57,7 @@
                                        <pre><code>\r
        .img-flip-h {\r
                transform:                      scale( -1, 1);\r
-               -o-transform:                   scale(-1);\r
+               -o-transform:                   scale( -1, 1);\r
                -ms-transform:                  scale( -1, 1);\r
                -moz-transform:                 scale( -1, 1);\r
                -webkit-transform:              scale( -1, 1);\r
@@ -55,7 +65,12 @@
                -ms-filter:                     fliph();\r
        }\r
                                        </code></pre>\r
-                                       \r
+                                       <p>ie では このほかに以下のような書き方もある．</p>\r
+                                       <pre><code>\r
+       filter:                 progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);\r
+       -ms-filter:             progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);\r
+                                       </code></pre>\r
+                               \r
                                        <h2>flip-v 垂直方向に反転</h2>\r
                                        <div class="clearfix">\r
                                                <img src="1.gif" class="img-flip-v float-left" width="200" height="200" alt="" title="">\r
@@ -73,6 +88,11 @@
                -ms-filter:                     flipv();\r
        }\r
                                        </code></pre>\r
+                                       <p>ie では このほかに以下のような書き方もある．</p>\r
+                                       <pre><code>\r
+       filter:                 progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);\r
+       -ms-filter:             progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);\r
+                                       </code></pre>\r
                                        \r
                                        <h2>flip-vh 水平垂直方向に反転 または 180度回転</h2>\r
                                        <div class="clearfix">\r
@@ -90,7 +110,12 @@
                filter:                         flipv() fliph();\r
                -ms-filter:                     flipv() fliph();\r
        }\r
-                                       </code></pre>                   \r
+                                       </code></pre>\r
+                                       <p>ie では このほかに以下のような書き方もある．</p>\r
+                                       <pre><code>\r
+       filter:                 progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);\r
+       -ms-filter:             progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);\r
+                                       </code></pre>   \r
                                </div>\r
                                <!-- InstanceEndEditable -->\r
             </div>\r