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軸に角度を付け傾けています。