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
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/common.css">
\r
11 <!-- InstanceBeginEditable name="doctitle" -->
\r
12 <title>css3 transform | pettanR</title>
\r
13 <!-- InstanceEndEditable -->
\r
14 <!-- InstanceBeginEditable name="head" -->
\r
15 <!-- InstanceEndEditable -->
\r
19 <div id="general-content">
\r
20 <div id="outer-wrapper">
\r
23 <div class="base-content-width" style="position:relative;">
\r
24 <h1><a href="../index.html">pettanR</a></h1>
\r
25 <!-- global navi -->
\r
26 <div id="global-navi">
\r
27 <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>
\r
32 <div id="inner-wrapper" class="base-content-width">
\r
33 <!-- InstanceBeginEditable name="main_content" -->
\r
35 <h2>css3 transform による 画像の水平・垂直反転のテストページ</h2>
\r
36 <p>このページは css3 transform による画像反転のためのテストページです.</p>
\r
37 <p>ブラウザによる画像の反転方法は、Web標準を使うもの、非Web標準な独自実装やプラグインを使うものなどいくつかあります.</p>
\r
38 <p>このなかで transform による画像反転が(おそらく)もっとも平易なもので、 ぺったんR での画像反転表示の本命となります.</p>
\r
40 <h3>filter 指定に関する注意</h3>
\r
41 <p>ie9 以下で ActiveX が有効の場合に使用できる filter 指定による 画像反転も併記されています.filter 指定は ie の独自実装のため使用の際には注意が必要です.</p>
\r
43 <h3>Opera に関する注意</h3>
\r
44 <p>Opera の transform のサポート開始は 10.5 以降とされますが、scale( -1, -1) については Opera 11.5 以降となるみたいです.その間は rotate(180deg) によって flip-vh ( 水平垂直方向に反転 ) のみ transform で行えるようです.</p>
\r
45 <h2>Original Image</h2>
\r
46 <div class="clearfix">
\r
47 <img src="1.gif" class="float-left" width="200" height="200" alt="" title="">
\r
51 <h2>flip-h 水平方向に反転</h2>
\r
52 <div class="clearfix">
\r
53 <img src="1.gif" class="img-flip-h float-left" width="200" height="200" alt="" title="">
\r
54 <p>transform をサポートしない ie8 以下でも、filter の指定で反転画像が表示されます.ただし ActiveX が切られている場合は反転表示されません.</p>
\r
59 transform: scale( -1, 1);
\r
60 -o-transform: scale( -1, 1);
\r
61 -ms-transform: scale( -1, 1);
\r
62 -moz-transform: scale( -1, 1);
\r
63 -webkit-transform: scale( -1, 1);
\r
65 -ms-filter: fliph();
\r
68 <p>ie では このほかに以下のような書き方もある.</p>
\r
70 filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);
\r
71 -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);
\r
74 <h2>flip-v 垂直方向に反転</h2>
\r
75 <div class="clearfix">
\r
76 <img src="1.gif" class="img-flip-v float-left" width="200" height="200" alt="" title="">
\r
82 transform: scale( 1, -1);
\r
83 -o-transform: rotate(180deg) scale(-1);
\r
84 -ms-transform: scale( 1, -1);
\r
85 -moz-transform: scale( 1, -1);
\r
86 -webkit-transform: scale( 1, -1);
\r
88 -ms-filter: flipv();
\r
91 <p>ie では このほかに以下のような書き方もある.</p>
\r
93 filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);
\r
94 -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);
\r
97 <h2>flip-vh 水平垂直方向に反転 または 180度回転</h2>
\r
98 <div class="clearfix">
\r
99 <img src="1.gif" class="img-flip-vh float-left" width="200" height="200" alt="" title="">
\r
102 <h3>css source</h3>
\r
105 transform: scale( -1, -1);
\r
106 -o-transform: rotate(180deg);
\r
107 -ms-transform: scale( -1, -1);
\r
108 -moz-transform: scale( -1, -1);
\r
109 -webkit-transform: scale( -1, -1);
\r
110 filter: flipv() fliph();
\r
111 -ms-filter: flipv() fliph();
\r
114 <p>ie では このほかに以下のような書き方もある.</p>
\r
116 filter: progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);
\r
117 -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);
\r
120 <!-- InstanceEndEditable -->
\r
125 <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->
\r
128 <div id="footer-item-container" class="base-content-width clearfix">
\r
129 <div class="footer-item-wrapper">
\r
130 <div class="footer-item">
\r
131 <h2>ぺったんR にようこそ</h2>
\r
139 <li><a href="index.html">Test Index</a></li>
\r
143 <div class="footer-item-wrapper">
\r
144 <div class="footer-item">
\r
147 <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>
\r
148 <li>絵師向けドキュメント</li>
\r
149 <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>
\r
150 <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>
\r
154 <div class="footer-item-wrapper">
\r
155 <div class="footer-item">
\r
158 <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>
\r
159 <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>
\r
161 <h2>Ajax contents</h2>
\r
163 <li><a href="../help/jp.xml">help | jp</a></li>
\r
167 <div class="footer-item-wrapper" style="width:170px;">
\r
168 <div class="footer-item" style="padding-right:0;">
\r
173 <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>
\r
181 <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
\r
182 </div><!-- #EndLibraryItem --></div>
\r
183 <script type="text/javascript" src="../javascripts/common.js"></script>
\r
184 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->
\r
186 <!-- InstanceEnd --></html>
\r