3-D CSS Photo Gallery
There is no JavaScript used on this demo*, pure CSS3 to create this arrangement of 4 different views of 6 photos.
Check out the full post to see how I did it.
*Social & Google Analytics use JavaScript, that’s it though
The HTML is pretty simple actually
<section id="gallery" class="font-macondo"><input id="cube" class="type-buttons" type="radio" name="display-type" checked="checked" /> <label class="type-label" for="cube" data-tip-title="Cube of Photos">Cube</label> <input id="ring" class="type-buttons" type="radio" name="display-type" /> <label class="type-label" for="ring" data-tip-title="Ring of Photos">Ring</label> <input id="hoop" class="type-buttons" type="radio" name="display-type" /> <label class="type-label" for="hoop" data-tip-title="Hoop of Photos">Hoop</label> <input id="halo" class="type-buttons" type="radio" name="display-type" /> <label class="type-label" for="halo" data-tip-title="The Rings will kill us all">Halo</label> <article> <ul> <li><a href="#fireworks-1"><img src="images/firework-1.jpg" alt="fireworks 1" /></a></li> <li><a href="#fireworks-2"><img src="images/firework-2.jpg" alt="fireworks 2" /></a></li> <li><a href="#rain-1"><img src="images/rain-1.jpg" alt="rain 1" /></a></li> <li><a href="#rain-2"><img src="images/rain-2.jpg" alt="rain 2" /></a></li> <li><a href="#lightning-1"><img src="images/lightning-1.jpg" alt="lightning 1" /></a></li> <li><a href="#lightning-2"><img src="images/lightning-2.jpg" alt="lignthing 2" /></a></li> </ul> </article></section>
You might ask yourself why the inputs aren’t in their own holder element, or better yet it’s own unordered list. Well, that’s because I’m using the the CSS :checked pseudo class on the inputs along with the general sibling combinator ~ to change the way the photos are arranged. It’s better to show you with some code, so here goes:
#gallery article li {
position:absolute;
width:200px;
height:200px;
border:5px solid rgba(0,0,0,0.95);
list-style:none;
transition:1s;
}
/*Cube Styles*/
input:nth-of-type(1):checked ~ article,
.cube {
width:200px;
height:200px;
animation:spin 12s infinite linear;
transform-origin:50% 50%;
}
input:nth-of-type(1):checked ~ article li:first-child,
.cube li { transform:translateZ(100px); }
input:nth-of-type(1):checked ~ article li:nth-child(2),
.cube li:nth-child(2) { transform:translateZ(-100px); }
input:nth-of-type(1):checked ~ article li:nth-child(3),
.cube li:nth-child(3) { transform:rotateX(90deg) translateZ(100px); }
input:nth-of-type(1):checked ~ article li:nth-child(4),
.cube li:nth-child(4) { transform:rotateX(90deg) translateZ(-100px); }
input:nth-of-type(1):checked ~ article li:nth-child(5),
.cube li:nth-child(5) { transform:rotateY(90deg) translateZ(100px); }
input:nth-of-type(1):checked ~ article li:last-child,
.cube li:nth-child(6) { transform:rotateY(90deg) translateZ(-100px); }
@keyframes spin {
from { transform:rotateX(0) rotateY(0); }
to { transform:rotateX(360deg) rotateY(360deg); }
}
The styles for the Ring, Hoop, & Halo are all controlled via the same method. nth-of-type(2 – 4):checked. I could have included classes on each list item as opposed to using nth-child(n), but that would have added unnecessary classes to the html.
As for the photos themselves, for this simple demo I scaled them down to 200px by whatever the aspect ratio made them high. I included links around the images with the hopes of one day making it go to a gallery. Perhaps using the :target pseudo class, but that’s alittle out of scope for this project right now, and actually I just wanted it finished in time to enter it into Mozilla’s March Dev Derby.
As always, be sure that you include all the relative vendor prefixes, and remember to keep the list in intervals of 6, because there’s only 6 sides of a cube!
Related posts:
