<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
-<html><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
+<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
<head>\r
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
</head>\r
\r
<body>\r
- <!--[if lt IE 9]>\r
- <script type="text/javascript">\r
- (function(){\r
- var b = document.body || (function(){document.write('<body>');return document.body;})(),\r
- c = b.className || '',\r
- x = document.createElement('div');\r
- b.appendChild(x);\r
- x.style.cssText = 'width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
- b.className += [ c !== '' ? ' ' : c, 'pettanr-ActiveX-', x.offsetHeight > 1 ? 'enabled' : 'disabled'].join( '');\r
- b.removeChild(x);\r
- })();\r
- </script>\r
- <![endif]-->\r
-\r
<div id="general-content">\r
<div id="outer-wrapper">\r
\r
<div id="inner-wrapper" class="base-content-width">\r
<!-- InstanceBeginEditable name="main_content" -->\r
<div id="main">\r
+ <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > css3 transform による 画像の水平・垂直反転のテストページ</div>\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
<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
-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
-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
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
</div>\r
</div>\r
<div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
- </div><!-- #EndLibraryItem --></div>\r
+ </div><!-- #EndLibraryItem -->\r
+ </div>\r
+ <script type="text/javascript">\r
+ var has_server_support = false;\r
+ </script>\r
<script type="text/javascript" src="../javascripts/common.js"></script>\r
<!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->\r
</body>\r
OSDN Git Service
