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

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

by funato

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<div id="container">
    <div id="cube" class="show-front">
        <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;
    
    /* perspectiveの設定 */
    -webkit-perspective:1000px;
    perspective:1000px;
}
#cube {
    width: 100%;
    height: 100%;
    position: absolute;

    /* transform-styleとtransitionの設定 */  
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition:-webkit-transform 1s ease;
    -moz-transition:-moz-transform 1s ease;
    transition:transform 1s ease;
    
}
#cube figure {
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid #000;
}

/* 初期状態では無いときのfrontの扱い */
#cube .front{
    -webkit-transform: translateZ(101px);
    -moz-transform: translateZ(101px);
    transform: translateZ(101px);
}
#cube .back{
    -webkit-transform: rotateX(-180deg) translateZ(101px);
    -moz-transform: rotateX(-180deg) translateZ(101px);
    transform: rotateX(-180deg) translateZ(101px);
}
#cube .right{
    -webkit-transform: rotateY(90deg) translateZ(101px);
    -moz-transform: rotateY(90deg) translateZ(101px);
    transform:rotateY(90deg) translateZ(101px);
}
#cube .left{
    -webkit-transform: rotateY(-90deg) translateZ(101px);
    -moz-transform: rotateY(-90deg) translateZ(101px);
    transform:rotateY(-90deg) translateZ(101px);
}
#cube .top{
    -webkit-transform: rotateX(90deg) translateZ(101px);
    -moz-transform: rotateX(90deg) translateZ(101px);
    transform:rotateX(90deg) translateZ(101px);
}
#cube .bottom{
    -webkit-transform: rotateX(-90deg) translateZ(101px);
    -moz-transform: rotateX(-90deg) translateZ(101px);
    transform:rotateX(-90deg) translateZ(101px);
}



/* それぞれの初期状態のtransform, translateの設定...

JavaScript

/* 
    JSによるclassのスワッピングの設定
*/
var _parent=$('#cube'),
    _btn=$('#btns li a'),
    _cls;

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