<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<header class="main-header clearfix">
<img class="logo" src="http://gdurl.com/78rD">
<h1 class="name">3DTransform <span>Gallery</span></h1>
</header>
<div class="content clearfix">
<div class="cube-container">
<div class="photo-cube">
<img class="front"src="http://gdurl.com/PdNJ" alt="">
<div class="back photo-desc">
<h3>Earth from Space</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<a href="#" class="button">download</a>
</div>
<img class="left" src="http://gdurl.com/zDJz" alt="">
<img class="right" src="http://gdurl.com/JLdx" alt="">
</div>
</div>
<div class="cube-container">
<div class="photo-cube">
<img class="front" src="http://gdurl.com/oxTp" alt="">
<div class="back photo-desc">
<h3>Space Images</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<a href="#" class="button">download</a>
</div>
<img class="left" src="http://gdurl.com/A2BF" alt="">
<img class="right" src="http://gdurl.com/wt4v" alt="">
</div>
</div>
<div class="cube-container">
<div class="photo-cube">
<img class="front" src="http://gdurl.com/tvtR" alt="">
<div class="back photo-desc">
<h3>The Milky Way</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<a href="#" class="button">download</a>
</div>
<img class="left" src="http://gdurl.com/tvtR" alt="">
<img class="right" src="http://gdurl.com/VjHH" alt="">
</div>
</div>
</div>
</div>
/* =================================
Base Element Styles
==================================== */
* {
box-sizing: border-box;
}
body {
font: 1em/1.5 'Open Sans', sans-serif;
color: #373737;
background: #eaeaea;
margin: 0;
}
a {
text-decoration: none;
}
h1,
h2,
h3 {
text-transform: uppercase;
}
h2 {
font-size: 1.125em;
color: #4a89ca;
font-weight: 600;
margin: 0;
}
h3 {
font-size: 1.3em;
line-height: 1.25em;
margin-top: .85em;
margin-bottom: .5em;
}
p {
font-size: .875em;
line-height: 1.4;
margin: 0 0 1.5em;
}
/* =================================
Base Layout Styles
==================================== */
/* ---- Layout Containers ---- */
.container,
.content {
margin: auto;
}
.container {
width: 94.02985075%;
max-width: 1260px;
padding: 0 2.25em 4em;
background: #fff;
}
.main-header {
text-align: center;
padding: 2.8em 0 3.8em;
}
.cube-container {
max-width: 200px;
text-align: center;
margin: 0 auto 4.5em;
}
/* ---- Page Elements ---- */
.name {
font-size: 1.65em;
font-weight: 800;
margin: 0 0 1.5em;
line-height: 1;
}
.name span {
font-weight: 300;
margin-left: -7px;
}
.logo {
width: 45px;
margin-bottom: .4em;
cursor: pointer;
}
.button {
font-size: .8em;
color: #fff;
width: 90%;
line-height: 1.15;
font-weight: 700;
display: block;
text-decoration: none;
text-transform: uppercase;
padding: .95em 0;
border-radius: .5em;
background: rgba(74,137,202, .8);
margin: auto;
}
/* ---- Photo Overlay ---- */
.photo-desc {
font-size: .85em;
color: #fff;
padding: 1.1em 1em 0;
background: #345d88;
}
/* ---- Float clearfix ---- */
.clearfix::after {
content: " ";
display: table;
clear: both;
}
/* =================================
Media Queries
==================================== */
@media (min-width: 769px) {
.cube-container {
float: left;
margin-left: 16.6%;
}
}
@media (min-width: 1025px) {
.cube-container:first-child {
margin-left: 0;
}
.cube-container:last-child{
float: right;
}
.content {
max-width: 900px;
margin: auto;
}
}
/* =================================
Button Transitions
==================================== */
.button {
transition: background .3s;
}
.button:hover {
background: rgba(74,137,202, 1);
}
/* =================================
Photo 3D Transforms & Transitions
==================================== */
.cube-container {
box-shadow: 0 18px 40px 5px rgba(0,0,0,.4);
perspective: 800px;
}
.photo-cube {
transition: transform 2s ease-in-out;
width: 220px;
height: 200px;
transform-style: preserve-3d;
}
.photo-cube:hover {
transform: rotateY(-270deg);
}
.front,
.back,
.left,
.right {
width: 100%;
height: 100%;
display: block;
position: absolute;
}
.front {
transform: translate3d(0,0,110px);
}
.back {
transform: translateZ(-110px) rotateY(270deg);
transform-origin: center left;
}
.left {
transform: rotateY(-270deg) translate3d(110px, 0, 0);
transform-origin: top right;
}
.right {
transform: translateZ(-110px) rotateY(180deg);
}
