CSS3:iframeとtransformでスマホ実機風プレビュー

サンプルはこちら。

See the Pen kHIpz by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

transformはなんでも変形させられるので、iframeもこのように表示させることができます。

中はiframeなので普通にアクセスすることもできます。

CSS(Sass)

要となるのは下記の2点のみです。

body {
  ~
  @include perspective(1000);
}
.iphone {
  ~
  @include transform(rotateY(20deg) rotateX(30deg) scale(.8));
}

bodyに3D表現に必要なパース(奥行き)を用意し、iframeを囲んでいるクラス「iphone」自体をY軸とX軸に角度を付け傾けています。