• css3

    3Dを表現する

    2012/10/22

    css3で3D効果

    3d.png

    以前、transformを使った変形についてかきました。(参考:【CSS3】変形


    それの3D版!

    ※webkit対応ブラウザ(safari/chrome)でみてください


    書き方はこれ

    
    -webkit-transform-style: 描画の仕方;
    
    

    これを3D表現したい要素の親要素に指定します。

    といっても指定する値は2つしかありません。



    flat(初期値)・・・親要素に対して子要素を2D配置で描画する

    preserve-3d・・・親要素に対して子要素を3D配置で描画する


    平面か立体か!ってことです


    まずは親box。

     

     

     

    わかりやすいように、親に色と大きさを指定して回転させておきますね。
    これに3D配置の指定をします。

    
    親{
      width: 100px;
      height: 100px;
      background: #0CF;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: rotateX(-35deg) rotateY(40deg);
    }
    
    

    この親の中に子の要素を配置します。

    
    子{
      width: 200px;
      height: 200px;
      background:rgba(246,24,207,0.3);
      -webkit-transform: translateZ(50px);
    }
    
    

    わかりやすいように、子にも色と大きさを指定しました。色は透過をかけてます。

    子供をZ軸方向に50px移動すると、こんな感じ。

     


    子供




    わかりますか?3D!!



    これ、もし親に-webkit-transform-style: preserve-3d;がかかっていない場合は、こうなります。



    子供




    ね!2D!



    さらに、親要素に遠近効果を指定することで、もっと3D!を表現できます。

    書き方はこれ

    
    -webkit-perspective: 奥行きの深さを指定(数値);
    
    

    まずは、普通の回転。
    Y軸を中心に回転します。boxにマウスをあててみてね!

    回転

    これに奥行きの指定をすると。

    
    -webkit-perspective: 100;
    
    

    回転


    はい!目つぶったね!あなた!

    私もです!

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back