このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

前回の スマートフォンサイトで3D効果 transform rotate() の続きとなります。

こちらにperspectiveを追加し、遠近感効果を付けます。

HTML

<div id="turn">
<div id="rX">rotateX</div>
<div id="rY">rotateY</div>
<div id="rZ">rotateZ</div>
</div>

rotateX、rotateY、rotateZの親要素である

#turn{
-webkit-transform-style: preserve-3d;
-webkit-perspective: 100;
-webkit-transition: -webkit-transform 1s linear
}