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

web帳

記事詳細

2011.03.29

css3 3d 回転 transform rotate() perspective追加

前回の

css3 3d 回転 transform rotate()

の続きとなります。

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

HTML

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

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

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

-webkit-transform-style: preserve-3d;で3D表現使用可能とし、
-webkit-perspective: 値; で、パース(遠近感)の設定をし、
-webkit-transition: -webkit-transform 1s linear アニメーションの基本動作を設定します。
この3行付け加えるだけで、遠近感のある3Dを作成できます。
分かりやすいように、ボタンを設置し、ボタンをクリックすると
パース(遠近感)の設定するようにしました。
  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。