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="")
View Compiled
body
background: #eee
overflow: hidden
.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)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.