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

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

by KURO KUMO

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;
    
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}
#cube {
    width: 100%;
    height: 100%;
    position: absolute;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-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;
    -ms-transition: -ms-transform 1s ease;
    -o-transition: -o-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(102px);
    -moz-transform: translateZ(102px);
    -ms-transform: translateZ(102px);
    -o-transform: translateZ(102px);
    transform: translateZ(102px);
}
#cube .back {
    -webkit-transform: rotateX(-180deg) translateZ(102px);
    -moz-transform: rotateX(-180deg) translateZ(102px);
    -ms-transform: rotateX(-180deg) translateZ(102px);
    -o-transform: rotateX(-180deg) translateZ(102px);
    transform: rotateX(-180deg) translateZ(102px);
}
#cube .right {
    -webkit-transform: rotateY(90deg) translateZ(102px);
    -moz-transform: rotateY(90deg) translateZ(102px);
    -ms-transform: rotateY(90deg) translateZ(102px);
    -o-transform: rotateY(90deg) translateZ(102px);
    transform: rotateY(90deg) translateZ(102px);
}
#cube .left {
    -webkit-transform: rotateY(-90deg) translateZ(102px);
    -moz-transform: rotateY(-90deg) translateZ(102px);
    -ms-transform:...

JavaScript

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

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