今回はインラインフレーム(以降iframe)に表示したコンテンツをCSSで変形させる方法を紹介します。
使用するプロパティはCSS3で追加された「transform」というものです。
transformはタグに対して様々な変形を適用する事ができるプロパティです。
主に変形、移動、縮尺、回転、傾斜を適用する事ができます。
iframeにも適用する事ができ、下のiframeのように変わった見せ方ができます。
上のiframeにはtransformの縮小と傾斜を適用しています。
Flashなどのコンテンツも変形された状態で動いて表示されます。
iframeには具体的に下記のプロパティが適用されています。
transform:scale(0.5) skew(10deg, 0deg);
-moz-transform:scale(0.5) skew(10deg, 0deg);
-webkit-transform:scale(0.5) skew(10deg, 0deg);
-o-transform:scale(0.5) skew(10deg, 0deg);
-ms-transform:scale(0.5) skew(10deg, 0deg);
「scale(0.5)」の部分が縮尺を0.5倍に、「skew(10deg, 0deg)」はX軸に対して10度傾斜させるという指定です。
現在はまだベンダープレフィックスが必要ですが、主要ブラウザは実装が完了しているようで、近いうちに外れると思われます。
Firefoxなどは既にベンダープレフィックスが外れているようです。
また、何も指定しないまま変形させると要素の真ん中を基準に変形が行われますが、「transform-origin」というプロパティで基準を変える事ができます。
下記は基準を左上に変更するプロパティです。
transform-origin:0 0;
-moz-transform-origin:0 0;
-webkit-transform-origin:0 0;
-o-transform-origin:0 0;
-ms-transform-origin:0 0;
他の詳しいプロパティなどについては参考ページで確認してください。
上記のCSSを使い、従来ならFlashなどで作成しないといけないようなコンテンツが簡単に作れると思います。
リンク先のリアルタイムなサムネイルの表示、ページに別ページをデザイン的に組み込んだりなどです。
一度使用されてみてはいかがでしょうか。
■参考サイト
HTMLクイックリファレンス 2D 3D 変形
iframeとtransformでスマホ実機風プレビュー
システム構築に関してのご依頼、ご質問等がある場合は弊社ホームページ上のお問い合わせフォームもしくは下記連絡先までお問い合わせ下さい。
株式会社ヴィンテージ
TEL：093-513-7255