【CSS3】Transitions & Transform 3Dギャラリー

3Dトランスフォームを使った箱型ギャラリー

by tea4two

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<div style="width: 200px; border: 2px solid #000; margin: 0 auto 20px; height: 40px; background: orange;">ギャラリー</div>

<div id="container">
    <div id="cube" class="show-bottom">
        <figure class="front">
            <img src="http://lorempixel.com/200/200/sports/8/">
        </figure>
        <figure class="back">
            <img src="http://lorempixel.com/200/200/city/2/">
        </figure>
        <figure class="right">
            <img src="http://lorempixel.com/200/200/people/5/">
        </figure>
        <figure class="left">
            <img src="http://lorempixel.com/200/200/cats/7/">
        </figure>
        <figure class="top">
            <img src="http://lorempixel.com/200/200/food/5/">
        </figure>
        <figure class="bottom">
            <img src="http://lorempixel.com/200/200/technics/2/">
        </figure>
    </div>
</div>
            
<ul id="btns">
    <li><a href="#" class="show-front"><img src="http://lorempixel.com/80/80/sports/8/"></a></li>
    <li><a href="#" class="show-back"><img src="http://lorempixel.com/80/80/city/2/"></a></li>
    <li><a href="#" class="show-right"><img src="http://lorempixel.com/80/80/people/5/"></a></li>
    <li><a href="#" class="show-left"><img src="http://lorempixel.com/80/80/cats/7/"></a></li>
    <li><a href="#" class="show-top"><img src="http://lorempixel.com/80/80/food/5/"></a></li>
    <li><a href="#" class="show-bottom"><img src="http://lorempixel.com/80/80/technics/2/"></a></li>
</ul>

CSS

figure { margin: 0; padding: 0; }
img { vertical-align: bottom; }

#btns {
    overflow: hidden;
    list-style:none;
}
#btns li {
    float: left;
    margin-right: 5px;
}

/* コンテナ */
#container {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 20px auto 40px;
    
    -webkit-perspective: 600px;
    perspective: 600px;
}
#cube {
    width: 100%;
    height: 100%;
    position: absolute;

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    -webkit-transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
}
#cube figure {
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid #000;
}

/* デフォルトの箱の状態 */
#cube .front {
    -webkit-transform: translateZ(101px);
    transform: translateZ(101px);
}
#cube .back {
    -webkit-transform: rotateX(-180deg) translateZ(101px);
    transform: rotateX(-180deg) translateZ(101px);
}
#cube .right {
    -webkit-transform: rotateY(90deg) translateZ(101px);
    transform: rotateY(90deg) translateZ(101px);
}
#cube .left {
    -webkit-transform: rotateY(-90deg) translateZ(101px);
    transform: rotateY(-90deg) translateZ(101px);
}
#cube .top {
    -webkit-transform: rotateX(90deg) translateZ(101px);
    transform: rotateX(90deg) translateZ(101px);
}
#cube .bottom {
    -webkit-transform: rotateX(-90deg) translateZ(101px);
    transform: rotateX(-90deg) translateZ(101px);
}

/* active時の取扱い */

#cube.show-front {
    
}
/* 
    初期状態の逆をやる
    translate <--> rotate の書き順も逆になるので注意
    Zが-101pxの理由は、初期状態のボックスの面がすべて
    translateZに101pxになっているため、飛び出して見えないよう
    -101pxで０に戻してやっている。
*/
#cube.show-back {
    -webkit-transform: translateZ(-101px) rotateX(180deg);
    transform: translateZ(-101px) rotateX(180deg);
}
#cube.show-right {
    -webkit-transform: translateZ(-101px) rotateY(-90deg);
    transform: translateZ(-101px) rotateY(-90deg);
}
#cube.show-left {
    -webkit-transform: translateZ(-101px) rotateY(90deg);
   ...

JavaScript

var _parent = $('#cube'),
    _btns = $('#btns li > a'),
    _cls;

_btns.on('click', function() {
    _cls = $(this).attr('class');
    _parent.attr('class',_cls);
    
    return false;
});