0.5.x/test/transform.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
   2 <html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
   3 <head>\r
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   6         <meta http-equiv="Content-Language" content="ja">\r
   7         <meta http-equiv="Content-Script-Type" content="text/javascript">\r
   8         <meta http-equiv="Content-Style-Type" content="text/css">\r
   9         <meta http-equiv="imagetoolbar" content="no">\r
  10         <link rel="stylesheet" type="text/css" href="../stylesheets/site.css">\r
  11         <link rel="stylesheet" type="text/css" href="../stylesheets/peta.common.css">\r
  12         <link rel="stylesheet" type="text/css" href="../stylesheets/system.css">\r
  13         <!-- InstanceBeginEditable name="doctitle" -->\r
  14         <title>css3 transform | pettanR</title>\r
  15         <!-- InstanceEndEditable -->\r
  16         <!-- InstanceBeginEditable name="head" -->\r
  17         <!-- InstanceEndEditable -->\r
  18 </head>\r
  19 \r
  20 <body>\r
  21     <div id="general-content">\r
  22         <div id="outer-wrapper">\r
  23             \r
  24             <div id="header">\r
  25                 <div class="base-content-width" style="position:relative;">\r
  26                     <h1><a href="../index.html">pettanR</a></h1>\r
  27                 <!-- global navi -->\r
  28                     <div id="global-navi">\r
  29                         <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
  30                     </div>\r
  31                 </div>\r
  32             </div>\r
  33             \r
  34             <div id="inner-wrapper" class="base-content-width">\r
  35                                 <!-- InstanceBeginEditable name="main_content" -->\r
  36                                 <div id="main">\r
  37                                         <div id="breadcrumb"><a href="index.html">テスト インデックス</a> &gt; css3 transform による 画像の水平・垂直反転のテストページ</div>\r
  38                                         <h2>css3 transform による 画像の水平・垂直反転のテストページ</h2>\r
  39                                         <p>このページは css3 transform による画像反転のためのテストページです．</p>\r
  40                                         <p>ブラウザによる画像の反転方法は、Web標準を使うもの、非Web標準な独自実装やプラグインを使うものなどいくつかあります．</p>\r
  41                                         <p>このなかで transform による画像反転が（おそらく）もっとも平易なもので、 ぺったんR での画像反転表示の本命となります．</p>\r
  42                                         \r
  43                                         <h3>filter 指定に関する注意</h3>\r
  44                                         <p>ie9 以下で ActiveX が有効の場合に使用できる filter 指定による 画像反転も併記されています．filter 指定は ie の独自実装のため使用の際には注意が必要です．</p>\r
  45                                         \r
  46                                         <h3>Opera に関する注意</h3>\r
  47                                         <p>Opera の transform のサポート開始は 10.5 以降とされますが、scale( -1, -1) については Opera 11.5 以降となるみたいです．その間は rotate(180deg) によって flip-vh ( 水平垂直方向に反転 ) のみ transform で行えるようです．</p>\r
  48                                         <h2>Original Image</h2>\r
  49                                         <div class="clearfix">\r
  50                                                 <img src="1.gif" class="float-left" width="200" height="200" alt="" title="">\r
  51                                                 <p>オリジナルの画像です．</p>\r
  52                                         </div>\r
  53                                         \r
  54                                         <h2>flip-h 水平方向に反転</h2>\r
  55                                         <div class="clearfix">\r
  56                                                 <img src="1.gif" class="img-flip-h float-left" width="200" height="200" alt="" title="">\r
  57                                                 <p>transform をサポートしない ie8 以下でも、filter の指定で反転画像が表示されます．ただし ActiveX が切られている場合は反転表示されません．</p>\r
  58                                         </div>\r
  59                                         <h3>css source</h3>\r
  60                                         <pre><code>\r
  61         .img-flip-h {\r
  62                 transform:                      scale( -1, 1);\r
  63                 -o-transform:                   scale( -1, 1);\r
  64                 -ms-transform:                  scale( -1, 1);\r
  65                 -moz-transform:                 scale( -1, 1);\r
  66                 -webkit-transform:              scale( -1, 1);\r
  67                 filter:                         fliph();\r
  68                 -ms-filter:                     fliph();\r
  69         }\r
  70                                         </code></pre>\r
  71                                         <p>ie では このほかに以下のような書き方もある．</p>\r
  72                                         <pre><code>\r
  73         filter:                 progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);\r
  74         -ms-filter:             progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);\r
  75                                         </code></pre>\r
  76                                 \r
  77                                         <h2>flip-v 垂直方向に反転</h2>\r
  78                                         <div class="clearfix">\r
  79                                                 <img src="1.gif" class="img-flip-v float-left" width="200" height="200" alt="" title="">\r
  80                                                 <p></p>\r
  81                                         </div>\r
  82                                         <h3>css source</h3>\r
  83                                         <pre><code>\r
  84         .img-flip-v {\r
  85                 transform:                      scale( 1, -1);\r
  86                 -o-transform:                   rotate(180deg) scale(-1);\r
  87                 -ms-transform:                  scale( 1, -1);\r
  88                 -moz-transform:                 scale( 1, -1);\r
  89                 -webkit-transform:              scale( 1, -1);\r
  90                 filter:                         flipv();\r
  91                 -ms-filter:                     flipv();\r
  92         }\r
  93                                         </code></pre>\r
  94                                         <p>ie では このほかに以下のような書き方もある．</p>\r
  95                                         <pre><code>\r
  96         filter:                 progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);\r
  97         -ms-filter:             progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);\r
  98                                         </code></pre>\r
  99                                         \r
 100                                         <h2>flip-vh 水平垂直方向に反転 または 180度回転</h2>\r
 101                                         <div class="clearfix">\r
 102                                                 <img src="1.gif" class="img-flip-vh float-left" width="200" height="200" alt="" title="">\r
 103                                                 <p></p>\r
 104                                         </div>\r
 105                                         <h3>css source</h3>\r
 106                                         <pre><code>\r
 107         .img-flip-vh {\r
 108                 transform:                      scale( -1, -1);\r
 109                 -o-transform:                   rotate(180deg);\r
 110                 -ms-transform:                  scale( -1, -1);\r
 111                 -moz-transform:                 scale( -1, -1);\r
 112                 -webkit-transform:              scale( -1, -1);\r
 113                 filter:                         flipv() fliph();\r
 114                 -ms-filter:                     flipv() fliph();\r
 115         }\r
 116                                         </code></pre>\r
 117                                         <p>ie では このほかに以下のような書き方もある．</p>\r
 118                                         <pre><code>\r
 119         filter:                 progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);\r
 120         -ms-filter:             progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);\r
 121                                         </code></pre>   \r
 122                                 </div>\r
 123                                 <!-- InstanceEndEditable -->\r
 124             </div>\r
 125         </div>\r
 126     </div>\r
 127     \r
 128     <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
 129 \r
 130         <div id="footer">\r
 131             <div id="footer-item-container" class="base-content-width clearfix">\r
 132                 <div class="footer-item-wrapper">\r
 133                     <div class="footer-item">\r
 134                         <h2>ぺったんR にようこそ</h2>\r
 135                         <ul>\r
 136                             <li>サンプル</li>\r
 137                             <li>ぺったんRの特徴</li>\r
 138                             <li>沿革</li>\r
 139                         </ul>\r
 140                         <h2>Test</h2>\r
 141                         <ul>\r
 142                             <li><a href="index.html">Test Index</a></li>\r
 143                         </ul>\r
 144                     </div>\r
 145                 </div>\r
 146                 <div class="footer-item-wrapper">\r
 147                     <div class="footer-item">\r
 148                         <h2>ドキュメント</h2>\r
 149                         <ul>\r
 150                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
 151                             <li>絵師向けドキュメント</li>                                                     \r
 152                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
 153                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
 154                         </ul>\r
 155                     </div>\r
 156                 </div>\r
 157                 <div class="footer-item-wrapper">\r
 158                     <div class="footer-item">\r
 159                         <h2>プロトタイプ</h2>\r
 160                         <ul>\r
 161                             <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
 162                             <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
 163                         </ul>\r
 164                         <h2>Ajax contents</h2>\r
 165                         <ul>\r
 166                             <li><a href="../help/jp.xml">help | jp</a></li>\r
 167                         </ul>\r
 168                     </div>\r
 169                 </div>\r
 170                 <div class="footer-item-wrapper" style="width:170px;">\r
 171                     <div class="footer-item" style="padding-right:0;">\r
 172                         <h2>ぺったんRチーム</h2>\r
 173                         <ul>\r
 174                             <li>わたしたちについて</li>\r
 175                             <li>ミッション</li>\r
 176                             <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
 177                             <li>個人情報保護方針</li>\r
 178                             <li>作品の取り扱い</li>\r
 179                             <li>お問い合わせ</li>\r
 180                         </ul>\r
 181                     </div>\r
 182                 </div>\r
 183             </div>\r
 184             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
 185         </div><!-- #EndLibraryItem -->\r
 186         </div>\r
 187         <script type="text/javascript">\r
 188                 var has_server_support = false;\r
 189         </script>\r
 190 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->\r
 191 </body>\r
 192 <!-- InstanceEnd --></html>\r