bata's log

フロントエンド系のTipsとかメモ

CSS3で立体を作る

CSS3のtransformをひと通りやりたかったので作ってみた。

表示例

文章でかなり説明しづらいので、最初に動いているものを…
止まっているとよくわからないので回してみました。

立体を表示する画面に設定するプロパティ

perspective

奥行きを設定するプロパティです。
数値が小さいほど奥行きが大きくなります。

perspective-origin

視点を設定します。
前の値が縦軸、後ろの値が横軸です。
50%に設定すると正面から見た視点になります。

立体の親要素に設定するプロパティ

transform-style

要素の子要素が3D空間に配置されるかどうかを設定します。
初期値がflatなので3Dにする場合は設定が必要です。

立体の子要素に設定するプロパティ

実際にtransformを使って変形させる為のプロパティです。

transform: translateZ();

3D空間での前後の位置を設定します。 マイナスの値を入れると元の位置よりも前に、プラスのあたいを入れると元の位置より後ろに配置されます。

transform: rotatoX,Y,Z();

2Dではrotato()で設定しますが、3DではX軸、Y軸、Z軸を基準に回転します。

HTML

<div class="wrap">
    <div class="box">
        <div class="dot parts"></div>
        <div class="red parts">1</div>
        <div class="blue parts">2</div>
        <div class="green parts">3</div>
        <div class="orange parts">4</div>
        <div class="pink parts">5</div>
        <div class="gray parts">6</div>
    </div>
</div>

SCSS

実際に作成する時はperspective-origin: 150% 150%;くらいで角度をつけてやると、各パーツの位置が見やすくなります。

html{
    height: 100%;
}

body {
  background: #fff;
  font: 12px sans-serif;
  height: 100%;
}

/* 立体をレンダリングする領域の設定 */
.wrap{
    overflow: hidden;
    height: 100%;
    -webkit-perspective: 250px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective: 250px;
    -moz-perspective-origin: 50% 50%;
}

/* 立体の設定 */
.box{
    position: absolute;
    font-size: 50px;
    width: 100px;
    height: 100px;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}

/* 立体のパーツの基本設定 */
.parts{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    line-height: 100px;
}

.dot{
    border: 1px dashed black;
}

/* 立体の各パーツを配置 */
.red{
    background: rgba(red,0.8);
    -webkit-transform: translateZ(50px);
    -moz-transform: translateZ(50px);
}

.blue{
    background: rgba(blue,0.8);
    -webkit-transform: translateZ(-50px);
    -moz-transform: translateZ(-50px);
}

.green{
    background: rgba(green,0.8);
    -webkit-transform: rotateX(-90deg) translateZ(50px);
    -moz-transform: rotateX(-90deg) translateZ(50px);
}

.orange{
    background: rgba(orange,0.8);
    -webkit-transform: rotateX(90deg) translateZ(50px);
    -moz-transform: rotateX(90deg) translateZ(50px);
}

.pink{
    background: rgba(pink,0.8);
    -webkit-transform: rotatey(90deg) translateZ(50px);
    -moz-transform: rotatey(90deg) translateZ(50px);
}

.gray{
    background: rgba(gray,0.8);
    -webkit-transform: rotatey(-90deg) translateZ(50px);  
    -moz-transform: rotatey(-90deg) translateZ(50px);   
}


/* アニメーションの設定 */
.box{
    -webkit-animation: rotateY 5s linear infinite;
    -moz-animation: rotateY 5s linear infinite;
}

@-webkit-keyframes rotateY {
    0% {-webkit-transform: rotateY(0deg) rotateX(0deg)}
    100% {-webkit-transform: rotateY(360deg) rotateX(360deg)}
}

@-moz-keyframes rotateY {
    0% {-moz-transform: rotateY(0deg) rotateX(0deg)}
    100% {-moz-transform: rotateY(360deg) rotateX(360deg)}
}