Pure CSS 3D Gallery

index.jade

ul.m
    li.m1.li(tabindex="1"): img(src="//unsplash.it/500/500?random=1" alt="")
    li.m2.li(tabindex="2"): img(src="//unsplash.it/500/500?random=2" alt="")
    li.m3.li(tabindex="3"): img(src="//unsplash.it/500/500?random=3" alt="")
    li.m4.li(tabindex="4"): img(src="//unsplash.it/500/500?random=4" alt="")
    li.m5.li(tabindex="5"): img(src="//unsplash.it/500/500?random=5" alt="")
    li.m6.li(tabindex="6"): img(src="//unsplash.it/500/500?random=6" alt="")
    li.cube-wrap
        div.cube
            div.front:  img(src="//unsplash.it/500/500?random=1" alt="")
            div.right:  img(src="//unsplash.it/500/500?random=2" alt="")
            div.top:    img(src="//unsplash.it/500/500?random=3" alt="")
            div.left:   img(src="//unsplash.it/500/500?random=4" alt="")
            div.bottom: img(src="//unsplash.it/500/500?random=5" alt="")
            div.back:   img(src="//unsplash.it/500/500?random=6" alt="")

Pure CSS 3D Gallery.markdown

Pure CSS 3D Gallery

A Pen by Maciej Leszczyński on CodePen.

License.

style.sass

body
    background: #eee

.m
    display: block
    width: 232px
    height: 500px
    position: relative
    float: right
    padding: 0 30px 0 40px
    margin-top: 40px
    box-shadow: -10px 0 0 #D6D6D6

    .li
        display: block
        width:  100px
        height: 100px
        position: relative
        z-index: 1000
        float: left
        margin: 0 10px 10px 0
        border: solid 3px #55BFE2
        background-color: #55BFE2
        outline: none
        cursor: pointer

        &:focus img
            opacity: .3

        > img
            width:  100px
            height: 100px
            min-width:  100px
            min-height: 100px
            max-width:  100px
            max-height: 100px
            position: absolute
            left: 0
            top:  0
            transition: .3s

.cube-wrap
    width:  500px
    height: 500px
    position: absolute
    top: 0
    right: 400px
    perspective: 1000px

.cube
    width:  500px
    height: 500px
    position: absolute
    top:  0
    left: 0
    transform-style: preserve-3d
    transform: rotateX(0deg) translateZ(-250px)
    transition: 2s 9999999s

    div
        width:  500px
        height: 500px
        position: absolute
        top:  0
        left: 0
        background-color: #222

    .front
        transform: rotateY(0deg) translateZ(250px)

    .back
        transform: rotateX(180deg) translateZ(250px)

    .right
        transform: rotateY(90deg) translateZ(250px)

    .left
        transform: rotateY(-90deg) translateZ(250px)

    .top
        transform: rotateX(90deg) translateZ(250px)

    .bottom
        transform: rotateX(-90deg) translateZ(250px)

    img
        width:  100%
        height: 100%
        min-width:  100%
        min-height: 100%
        max-width:  100%
        max-height: 100%
        position: absolute
        left: 0
        top: 0

.li:focus ~ .cube-wrap .cube
    transition: 1.2s

.m1:focus ~ .cube-wrap .cube
    transform: translateZ(-250px) rotateY(0deg)

.m2:focus ~ .cube-wrap .cube
    transform: translateZ(-250px) rotateY(-90deg)

.m3:focus ~ .cube-wrap .cube
    transform: translateZ(-250px) rotateX(-90deg)

.m4:focus ~ .cube-wrap .cube
    transform: translateZ(-250px) rotateY(90deg)

.m5:focus ~ .cube-wrap .cube
    transform: translateZ(-250px) rotateX(90deg)

.m6:focus ~ .cube-wrap .cube
    transform: translateZ(-250px) rotateX(180deg)