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 <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > css3 transform による 画像の水平・垂直反転のテストページ</div>
\r
36 <h2>css3 transform による 画像の水平・垂直反転のテストページ</h2>
\r
37 <p>このページは css3 transform による画像反転のためのテストページです.</p>
\r
38 <p>ブラウザによる画像の反転方法は、Web標準を使うもの、非Web標準な独自実装やプラグインを使うものなどいくつかあります.</p>
\r
39 <p>このなかで transform による画像反転が(おそらく)もっとも平易なもので、 ぺったんR での画像反転表示の本命となります.</p>
\r
41 <h3>filter 指定に関する注意</h3>
\r
42 <p>ie9 以下で ActiveX が有効の場合に使用できる filter 指定による 画像反転も併記されています.filter 指定は ie の独自実装のため使用の際には注意が必要です.</p>
\r
44 <h3>Opera に関する注意</h3>
\r
45 <p>Opera の transform のサポート開始は 10.5 以降とされますが、scale( -1, -1) については Opera 11.5 以降となるみたいです.その間は rotate(180deg) によって flip-vh ( 水平垂直方向に反転 ) のみ transform で行えるようです.</p>
\r
46 <h2>Original Image</h2>
\r
47 <div class="clearfix">
\r
48 <img src="1.gif" class="float-left" width="200" height="200" alt="" title="">
\r
52 <h2>flip-h 水平方向に反転</h2>
\r
53 <div class="clearfix">
\r
54 <img src="1.gif" class="img-flip-h float-left" width="200" height="200" alt="" title="">
\r
55 <p>transform をサポートしない ie8 以下でも、filter の指定で反転画像が表示されます.ただし ActiveX が切られている場合は反転表示されません.</p>
\r
60 transform: scale( -1, 1);
\r
61 -o-transform: scale( -1, 1);
\r
62 -ms-transform: scale( -1, 1);
\r
63 -moz-transform: scale( -1, 1);
\r
64 -webkit-transform: scale( -1, 1);
\r
66 -ms-filter: fliph();
\r
69 <p>ie では このほかに以下のような書き方もある.</p>
\r
71 filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);
\r
72 -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);
\r
75 <h2>flip-v 垂直方向に反転</h2>
\r
76 <div class="clearfix">
\r
77 <img src="1.gif" class="img-flip-v float-left" width="200" height="200" alt="" title="">
\r
83 transform: scale( 1, -1);
\r
84 -o-transform: rotate(180deg) scale(-1);
\r
85 -ms-transform: scale( 1, -1);
\r
86 -moz-transform: scale( 1, -1);
\r
87 -webkit-transform: scale( 1, -1);
\r
89 -ms-filter: flipv();
\r
92 <p>ie では このほかに以下のような書き方もある.</p>
\r
94 filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);
\r
95 -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);
\r
98 <h2>flip-vh 水平垂直方向に反転 または 180度回転</h2>
\r
99 <div class="clearfix">
\r
100 <img src="1.gif" class="img-flip-vh float-left" width="200" height="200" alt="" title="">
\r
103 <h3>css source</h3>
\r
106 transform: scale( -1, -1);
\r
107 -o-transform: rotate(180deg);
\r
108 -ms-transform: scale( -1, -1);
\r
109 -moz-transform: scale( -1, -1);
\r
110 -webkit-transform: scale( -1, -1);
\r
111 filter: flipv() fliph();
\r
112 -ms-filter: flipv() fliph();
\r
115 <p>ie では このほかに以下のような書き方もある.</p>
\r
117 filter: progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);
\r
118 -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);
\r
121 <!-- InstanceEndEditable -->
\r
126 <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->
\r
129 <div id="footer-item-container" class="base-content-width clearfix">
\r
130 <div class="footer-item-wrapper">
\r
131 <div class="footer-item">
\r
132 <h2>ぺったんR にようこそ</h2>
\r
140 <li><a href="index.html">Test Index</a></li>
\r
144 <div class="footer-item-wrapper">
\r
145 <div class="footer-item">
\r
148 <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>
\r
149 <li>絵師向けドキュメント</li>
\r
150 <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>
\r
151 <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>
\r
155 <div class="footer-item-wrapper">
\r
156 <div class="footer-item">
\r
159 <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>
\r
160 <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>
\r
162 <h2>Ajax contents</h2>
\r
164 <li><a href="../help/jp.xml">help | jp</a></li>
\r
168 <div class="footer-item-wrapper" style="width:170px;">
\r
169 <div class="footer-item" style="padding-right:0;">
\r
174 <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>
\r
182 <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
\r
183 </div><!-- #EndLibraryItem -->
\r
185 <script type="text/javascript">
\r
186 var has_server_support = false;
\r
188 <!-- <script type="text/javascript" src="../javascripts/gadgetOS.js"></script>
\r
189 <script type="text/javascript" src="../javascripts/common.js"></script> -->
\r
190 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->
\r
192 <!-- InstanceEnd --></html>
\r