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

web帳

記事詳細

2011.10.31

CSS3 3D効果アニメーション 立体四角形作成 transform rotateZ()

前回の記事の

css3 3d 回転 transform rotate()

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

を参考に今回は、CSS3で立体的な四角形のアニメーションを作りたいと思います。(Javascriptまたは画像を一切使用しません。)

こんな感じのですね。サイコロのように6面体の四角形となります。

早速ソースを見たい方は

デモページ 
 http://webcyou.com/demo/css3/transform/test02.html

 

1
2
3
4
5
6

※webkit系ブラウザ(safari,googleChrome等)で確認してください。

1.1番目の面の作成 

まず基本となる1番目の面の作成を行っていきます。

と同時に、3D処理を行える空間も作成していきます。

transform-originプロパティを追加し、2Dまたは3D効果の原点の位置を決めます。

(今回はwebkitのみ適応の-webkit-プリフィックス追加で設定していきます。)

また、transform-style preserve-3d追加で3D空間を作ります。

HTML

[code]
<div id="viewArea">
<div id="cube">
<div class="one">1</div>
</div>
</div>
[/code]

CSS表示エリア(任意)

[code]#viewArea{
width:160px;
height:160px;
margin:80px auto;
}[/code]

CSS面エリア (デザイン、サイズ調整任意)

[code]
#cube div{
position:absolute;
height:160px;
width:160px;
border:3px solid #222;
background:rgba(22, 122, 203,0.7);
text-align:center;
font-size:130px;
color:#fff;
font-family:Times;
}[/code]

 

CSS面エリア親要素

[code]
#cube{
-webkit-transform-style:preserve-3d;
-webkit-transform-origin: 80px 80px 0;
}[/code]

2.2番目の面の作成 

続いて2番目の面の作成を行っていくのですが、今のままだと確認がしづらいので

親要素である 「#cube 」rotateY と rotateXで角度を付けます。

CSS

[code]
#cube{
-webkit-transform: rotateY(55deg) rotateX(51deg);
}[/code]

2番目が面が付く場所は以下の場所となります。

※1

まず、2番目の面としてdiv class twoを追加します。

HTML

[code]
<div id="viewArea">
<div id="cube">
<div class="one">1</div>
<div class="two">2</div>
</div>
</div>
[/code]

この段階だとまだこのようになります。

ここで、一番目の面div class one に対してtransform: translateZ(80px)を指定し、2番目の面と離します。

CSS

[code]#cube .one{
-webkit-transform: translateZ(80px);
}[/code]

さらに2番目の面を-90度傾けます。

(右の画像はtransform: translateZ(80px)を指定しない場合です。

さらに2番目の面(.two)にもtransform: translateZ(80px)を指定し以下の部分へ持ってきます。

CSS

[code]#cube .two{
-webkit-transform: rotateX(-90deg) translateZ(80px);
}[/code]

2番目の面完成図

3.3番目の面の作成 

続いて、3番目の面の作成していきます。

2番目の面同様、transform: translateZ(80px)を指定し

2番目の面と反対の値、transform: rotateX(90deg)に設定します。

HTML

[code]
<div id="viewArea">
<div id="cube">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</div>
[/code]

CSS

[code]#cube .three{
-webkit-transform: rotateX(90deg) translateZ(80px);
}[/code]

更に、面の向きを変えるためtransform: rotateY(90deg)を加えて完成。

CSS

[code]#cube .three{
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(80px);
}[/code]

4.4番目の面の作成 

続いて4番目の面の作成。例のごとくHTMLにdivを追加します。

HTML

[code]</pre>
<div id="viewArea">
<div id="cube">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
</div>
</div>
<pre>[/code]

追加した状態はこのような状態だと思います。

これまた例のごとく、transform: translateZ(80px)を追加します。

[code]#cube .four {
-webkit-transform: translateZ(80px);
}[/code]

この位置にくるので、transform: rotateY(180deg)で1番目の反対の位置に配置します。

[code]-webkit-transform: rotateY(180deg) translateZ(80px);[/code]

やや完了ですが、さらに回転させ4番目の向きを変えます。

CSS

[code]-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(80px);[/code]

4番目の面はこれで完成。

5.5番目の面

5番目の面の作成。またまた例のごとくHTMLにdivを追加します。

HTML

[code]
<div id="viewArea">
<div id="cube">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
</div>
[/code]

4番目の面と同様、ここからスタートです。

さすがにもう覚えましたね。transform: translateZ(80px)を追加します。

1番目の面までもってきます。

5番目の面を任意の位置まで持っていくため、例のごとくrotateY(-90deg)を設定

CSS

[code]#cube .five {
-webkit-transform:rotateY(-90deg) translateZ(80px);
}[/code]

 

また、例のごとくですが、さらに向きを変えるためrotateZ(90deg)を追加し完成です。

CSS

[code]#cube .five {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(80px);
}[/code]

6.6番目の面

もうここまでくるとさすがにわかりますよね。5番目の面の反対側に設定したいので、
5番目の面で設定したrotateY(-90deg)rotateY(90deg)にするだけでOKです。

HTML

[code]<div id="viewArea">
<div id="cube">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</div>
</div>[/code]

 

CSS

[code]#cube .six {
-webkit-transform: rotateY(90deg) translateZ(80px);
}[/code]

 

これでついに完成!
デモページ 
 http://webcyou.com/demo/css3/transform/test02.html

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

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

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