CSS3のtransformをIE8でも使いたい

category-icon

 こんばんは、martinです。FirefoxやWebKit系のSafari、グーグルのChromeなどは、CSS3の魅力的な機能を色々取り入れています。中でも、CSS3のtransformLink やドロップシャドウ系は、ブログで写真を見せる場合などに凝った演出が出来るので、仕様が正式に決まるのが待ち遠しいですね(そう言えば、ボックスのドロップシャドウ box-shadowですが、CSS3の勧告候補から消えたLink のかなぁ)。便利な仕様だとは思うのですが。

 ちなみに、transformとは「変形」のことで、CSSのみで画像やらボックスやらを自在に回転させたり、ゆがませたりできる優れものです。で、例によってIE系はCSS3の対応は遅れています。とは言っても(これまたいつものように)transformに関しては、IEは実にIE5.5の時から似たようなものを実装していましたLink ! なので、それらを駆使すれば、CSS3相当のtransformが実装できそうです。

 transformが使えると何がうれしいって、例えば以下のようなポラロイド写真みたいなギャラリーがCSSのみで簡単に出来ます。実は下のショットはIE8でのものです。
CSS3-transform-IE8
IEでもCSS3のtransform相当のことが出来る

 画像の回転に関して、FirefoxやWebKit系は、画像の中心を回転軸として回転させます(なので回転軸は移動しない)。これは直感的で分かりやすいです。これに対して、IEは回転軸が指定した回転角度によって刻々と移動します。なので、標準仕様に似せようと思うと、回転軸を動かさない様にするための補正計算が必要になります。この計算にちょっとてこずりましたが、何とか回転軸が動かないような補正をすることが出来ました。

IE rotation
IEでは、ボックスはx軸とy軸に2点が常に接しつつ、すべるように回転するので軸が常に動く。

 で、とりあえずモノになりそうなものが出来たのでデモサイトを挙げておきます。画像へのマウスオーバーで拡大なんてのもCSSのみで出来るのですが、それもIEで動くようにしています。

 

→「CSS3 Transformを使ったギャラリー(IE互換)Link

 FirefoxやSafariでは、完全にCSS3のみで実現していて、IEでは、IE特有のフィルター機能をJavaScirptを通して操作しています。ボックス要素のドロップシャドウについては、以前、まぁまぁ凝ったスクリプトを書きましたLink が、新たに要素を追加しないといけないなど、あまり納得のいくものではありませんでした。今回ドロップシャドウに関しては、あまり凝ることはせずに、IEのフィルター機能を素直にそのまま使っています。
progid:DXImageTransform.Microsoft.dropshadow(enable=true,OffX=3, OffY=7, Color='#11000000', Positive='true');

 実は最近知ったのですが、フィルターのColorには通常のRGB形式だけでなく、透明度も指定できる#AARRGGBBの形式が使えるので、黒色の透明度を高くすればより影っぽくなります。CSS3レベルのぼやけた感じまでは出ませんが、まぁ、これで良しとしましょう。

 使い方は、簡単で、形はHTCファイルですが、JavaScriptの外部ファイルとして動作するようにしてます。これは、以前のドロップシャドウのスクリプトと同じです。それをIEのみが解釈する条件コメントの中に書いています。
<!--[if IE]>
 <script type="text/javascript" src="js/css3transform.htc"></script>
<![endif]-->

 これを書いておくだけで、スタイルシートに記された

     -moz-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
などを解釈して、IEのフィルター機能(Matrix Filter)で同等のことを表現します。デモページにあるように、IEでもCSS3のtransformはおよそ実現できるみたいです(まぁ、そもそもがIEのMatrix仕様を参考に実装したのでしょうけど)。

 このスクリプトを添付しておきます。

添付ファイル: css3transform.htcattachedIcon 

 

— posted by martin at 01:02 pm   commentComment [20]  pingTrackBack [0]

この記事に対するコメント・トラックバック [20件]

1. BENIT Website — 2009/12/30@14:30:40

こんにちは:)
これを使えば、傾けた画像でも、写真の白枠内に文字を同様に傾けて入れることができるんですね。このプロパティで文字も一緒に変形出来るとは知りませんでした。考えてみれば当たり前ですけど、ちゃんと要素ごとなんですね。


ところで、現在ダウンロードファイルが調整中のようですが、1.9.0リリース間近なのでしょうか?(ロードマップにあったバージョンチェック機能の強化が非常に嬉しいです。今自分のサイトがバージョン何なのかよくわからなくなってます(笑))

私事で恐縮なのですが年末に時間が取れそうなので、もし良かったら現行最新(1.8.8?)のバージョンをアップしていただけないでしょうか。
年の瀬の折、お忙しいとは思いますがもしお時間が取れそうでしたら、ご一考いただければ幸いです。

Owner Comment martin Website  2009/12/30@21:52:03

こんにちは。傾きは、自分も子要素はどうだろなぁと思っていましたが、すべての子要素に反映されたのは当然の気もしますがうれしかったですね。
 1.9.0のリリースは年明けですかね。身の回りがバタバタしているので。現行最新版は、このサイトで動いているやつでv1.8.9です。リリース予定にはないものですが、特に問題なさそうなので、こっそり置いときます。
 http://download.p2b.jp/archives/ppBlog189_20091230.zipLink
v1.8.9との差異は、記事の自動保存機能(ローカル)とかです。バージョン管理は、今作りかけです。

 良いお年を。

3. BENIT — 2009/12/31@10:20:55

ありがとうございます!
今度こそバージョンアップしたいと思います(笑

よいお年を!

scrollUp4. μ — 2010/01/04@23:11:06

はじめまして & あけましておめでとうございます。ppBlog、使わせてもらってます。

忙しくて1.7.6からいきなり1.8.9にアップデートしたのですが、携帯のほうで"1"としか表示されないといわれたので調べたところ、utils.phpのmy_convert_encoding関数で、

return mb_convert_encoding($string, $to, $from) or $string;

となっており、mb_convert_encodingの結果と$stringの論理和が返されているようです。

Perlではor前のコマンドが失敗したらor後を実行というのがあるので、PHPにも同じ構文がと思ったのですが軽く調べた限りなさそうです。

とりあえずor以降を削除して様子を見てますが、PHPは不勉強なので間違ったことをしていればご指摘ください。

Owner Comment martin Website  2010/01/12@12:57:03

こんにちは。明けましておめでとうございます。
ご指摘ありがとうございました。確かに、or以下はいらないですねぇ。or構文自体は、真偽値を返す関数なら使えると思いますが、ここでは意味不明ですね。。or構文の例としては
http://jp.php.net/manual/ja/function.imagecreate.phpLink とか。or以下は削除でOKと思います。

6. ちらみ — 2010/01/05@23:47:52

martinさん、明けましておめでとうございます。

当記事とは関係ありませんが、タグ絡みでバグのようなものを発見しました。
新規記事作成時に、僕の場合よくドラフト投稿で保存するんですが、タグを設定した状態でドラフト投稿を繰り返すと、owner/tags.ini.phpの中に、該当のタグの記事IDの末尾に"d"の文字がドラフト保存した数だけ追加されていっているようで、実際に記事を公開してそのタグリンクをクリックしても、「そのタグの記事はありません」となりました。
tags.ini.phpを直接編集して末尾のdを消せば大丈夫になりました。

一応報告です。

たしかこれって、トラックバックPINGを打った時も一度ドラフトしてると、記事IDの末尾にdが付いてしまって、実際にトラックバック先から参照しても記事ID+dを参照しようとするので「記事はありません」ってなった気がします。

Owner Comment martin Website  2010/01/12@17:15:33

 ちらみさん、明けましておめでとうございます。タグのバグ確認しました。以下のやつで如何でしょうか。http://p2b.jp/demo/utils_admin.txtLink
 トラックバックの件は昔そんなのがあって、ドラフト投稿時はPINGを打たないようにしているのですが、それとは別ですよねぇ、まだよく検証していないのですが、もう少し調べてみます。

8. ちらみ — 2010/01/05@23:56:01

あ、それからアクセス解析画面のログ分割ロジックですが、分割しないように設定しても(ログ1だけの状態)1カ月経過しても、ログ参照の時に真っ白画面にはなりませんでした。
以前確かそういう報告を見た気がしましたので。
Webサーバーのphpメモリーリミットの問題かも。

これも報告までに。

scrollUpOwner Comment martin Website  2010/01/12@17:17:28

ご報告ありがとうございます。確かにサーバー側の問題だと思います。現状、1MBぐらいでログを新規作成しますが、この上限を上げても良いかもですね。

10. BENIT — 2010/01/09@10:03:56

今年もよろしくお願いいたします:)

ソーシャルブックマーク関連で二つほど要望があります。
1.全体記事表示で使われているボタンですが、テーマごとに設定できるよう「/theme/テーマ名/Image/」内の画像を使うようにはできますでしょうか?
2.個別記事表示のソーシャルブックマークのソースがA要素の羅列になっていますが、これをそれぞれ「アイコンとユーザ数」をセットにしてリスト要素でマークアップするようにはできますでしょうか?(全体記事表示のポップアップ表示時のソースのように)

2については、アイコンを縦に並べようと思ったのですが、ユーザ数があったりなかったりすること、及びクラス名とかが付いていないことを考えるとどうやってもCSSでは制御できなかったので……

それと、全体記事表示でのソーシャルブックマークボタンですが、配置によっては表示領域から見切れて表示されたりしてしまいますね。左端においたら表示領域の大きさにもよりましたが左半分が見切れてしまいました。この辺の制御は難しいでしょうか?

Owner Comment martin Website  2010/01/13@00:35:13

BENITさん、明けましておめでとうございます。
1.はそういう要望があるだろうなと思っていました。2.はそうですね、リスト形式にした方がスマートな気もします。1,2に対応したものを置いておきます。
 →http://p2b.jp/demo/utils.txtLink
ボックスが切れる問題は、JavaScriptでの位置制御の問題ですが、あまり厳密にはしてないですからねぇ。もうちょいstrictにしてみます。

12. BENIT — 2010/01/09@10:06:10

訂正です。

全体記事表示でのソーシャルブックマークボタンですが、配置によっては表示領域から見切れて表示されたりしてしまいますね。

ボタンが見切れるのではなく、ボタンクリックで出てくるポップアップが見切れる、の間違いです。

以上、お忙しいところ恐縮ですがご検討いただければ幸いです。

13. BENIT — 2010/01/14@01:25:51

わがままを聞いていただきましてありがとうございます!
さっそく明日導入してみます

scrollUp14. ゆーすけ Website — 2010/01/27@09:29:40

IE8で http://p2b.jp/demo/CSS3-transform.htmlLink 開いてみましたが傾かないので、ローカルにコピーしてみたら傾きました。

htcという拡張子が問題に思ったので、css3transform.htc -> css3transform.jsにするとうまく行きました。

セキュリティの問題ですかね。

Owner Comment martin Website  2010/02/03@06:59:46

こんばんは、返事が遅れてすみません。
IEで、
「インターネットオプション」⇒「セキュリティ」⇒「インターネット」⇒「レベルのカスタマイズ」内の「拡張子ではなく、内容によってファイルを開く」が「無効」であると実行されないというご指摘がありました。この部分はデフォルトでは「有効」だと思うので、その設定を有効にするとOKかもしれません。

16. ゆーすけ — 2010/01/27@09:47:55

あ、うそでした。

うまく行ったと思ったのは、うっかりデフォルトのChromeで開いてたからで、やっぱりIE8だと傾いてませんでした。

17. ゆーすけ — 2010/02/03@12:06:50

返信ありがとうございます。

「拡張子ではなく、内容によってファイルを開く」は有効でした。

18. haru — 2010/08/04@17:37:14

ローカルにコピーさせて頂いて試していますが、
IE8で実行すると、12行目で'null'はNullまたはオブジェクトではありません。
というエラーがでます。互換モードだとエラー出ず、です。

scrollUp19. rti Website — 2010/09/04@18:27:50

始めまして。

計算式を参考に、jqueryに移植してみました。

http://rtilabs.net/files/2010_09_04/rotate.htmlLink

http://d.hatena.ne.jp/rti7743/20100904/1283594390Link

jqueryなので animate で簡単にぐるぐる回ります。

20. kouki — 2011/12/16@10:31:10

はじめまして。
二年ほど前の記事に失礼しております。
#18さん同様、ローカルにコピーすると、
IE6で回転、拡大機能が使えません。
お忙しいところ失礼いたしますが、
もしも理由などおわかりでしたら、
ご教示頂ければと思います。
宜しくお願いいたします。

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0078 sec.
prev
2024.3
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31