Credit to https://webdesign.tutsplus.com/tutorials/create-an-isometric-layout-with-3d-transforms--cms-27134
Built with blockbuilder.org
license: mit |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
html { | |
box-sizing: border-box; | |
} | |
*, *:before, *:after { | |
box-sizing: inherit; | |
} | |
img { | |
max-width: 100%; | |
height: auto; | |
display: block; | |
} | |
figure { | |
margin: 0; | |
} | |
.row { | |
width: 960px; | |
display: flex; | |
flex-wrap:wrap; | |
justify-content:flex-end; | |
transform: rotateX(60deg) rotateY(0deg) rotateZ(-25deg); | |
} | |
.column { | |
padding:20px; | |
width:50%; | |
max-width: 50%; | |
flex: 1 1 50%; | |
} | |
.row, | |
.column, | |
.ItemCard, | |
.ItemCard__dest, | |
.ItemCard__thumb { | |
position: relative; | |
backface-visibility: hidden; | |
transform-style: preserve-3d; | |
} | |
.cover { | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
.ItemCard__thumb img { | |
position: relative; | |
z-index: 1; | |
transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); | |
transform: translate3d(0, 0, 10px); | |
} | |
.shadow { | |
display: block; | |
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); | |
opacity: .9; | |
background-color: rgba(0, 0, 0, 0.1); | |
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); | |
} | |
.column:hover .ItemCard__dest { | |
z-index: 10; | |
} | |
.column:hover .ItemCard__dest, | |
.column:hover .ItemCard__thumb img { | |
transform: translate3d(0, 0, 50px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); | |
transform-origin: center bottom; | |
} | |
.column:hover .ItemCard__thumb .shadow { | |
opacity: .6; | |
background-color: rgba(0, 0, 0, 0.1); | |
box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.1); | |
} | |
</style> | |
</head> | |
<body> | |
<div class="row"> | |
<div class="column"> | |
<div class="ItemCard"> | |
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/8cc5d8de353686e6a4c1aeb2a551913e" target="_blank"></a> | |
<figure class="ItemCard__thumb"> | |
<img src="https://gist.githubusercontent.com/jonsadka/8cc5d8de353686e6a4c1aeb2a551913e/raw/2e664d8ad79a2883092b5bf4280c791930da8143/thumbnail.png" height="340" width="510" alt=""> | |
<span class="shadow cover"></span> | |
</figure> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="ItemCard"> | |
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/3d6b770b33ed18f622efcd9906d2c9a2" target="_blank"></a> | |
<figure class="ItemCard__thumb"> | |
<img src="https://gist.githubusercontent.com/jonsadka/3d6b770b33ed18f622efcd9906d2c9a2/raw/c37bb2fcafac596b47de63710ac0ccbf098a77f8/thumbnail.png" height="340" width="510" alt=""> | |
<span class="shadow cover"></span> | |
</figure> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="ItemCard"> | |
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/73a7b7b3d586979a6ab732918623f4ac" target="_blank"></a> | |
<figure class="ItemCard__thumb"> | |
<img src="https://gist.githubusercontent.com/jonsadka/73a7b7b3d586979a6ab732918623f4ac/raw/47807bd4a23264866d84a4803d281271f165aa8f/thumbnail.png" height="340" width="510" alt=""> | |
<span class="shadow cover"></span> | |
</figure> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="ItemCard"> | |
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/889f874519a774014a779de88a794f94" target="_blank"></a> | |
<figure class="ItemCard__thumb"> | |
<img src="https://gist.githubusercontent.com/jonsadka/889f874519a774014a779de88a794f94/raw/660454f6eccf6c9d93c95af508e597fad4f5379b/thumbnail.png" height="340" width="510" alt=""> | |
<span class="shadow cover"></span> | |
</figure> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="ItemCard"> | |
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/2868649fde2ceed413ff" target="_blank"></a> | |
<figure class="ItemCard__thumb"> | |
<img src="https://gist.githubusercontent.com/jonsadka/2868649fde2ceed413ff/raw/94ee3930d430b86e07c69b3c0ac637c634466f2f/thumbnail.png" height="340" width="510" alt=""> | |
<span class="shadow cover"></span> | |
</figure> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="ItemCard"> | |
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/c6c4da335b84b2b7cc4bcb0d4bd9b4d4" target="_blank"></a> | |
<figure class="ItemCard__thumb"> | |
<img src="https://gist.githubusercontent.com/jonsadka/c6c4da335b84b2b7cc4bcb0d4bd9b4d4/raw/f0eb5e506c0dc3443effa000c03a45333e6935b1/thumbnail.png" height="340" width="510" alt=""> | |
<span class="shadow cover"></span> | |
</figure> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="ItemCard"> | |
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/07202c6312437c896ac1dc2ba1c6dbd4" target="_blank"></a> | |
<figure class="ItemCard__thumb"> | |
<img src="https://gist.githubusercontent.com/jonsadka/07202c6312437c896ac1dc2ba1c6dbd4/raw/9b555d8c4ad33bb566522784dc88590e931faa30/thumbnail.png" height="340" width="510" alt=""> | |
<span class="shadow cover"></span> | |
</figure> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="ItemCard"> | |
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/d0aebe637bc205f8c9152b861f362b28" target="_blank"></a> | |
<figure class="ItemCard__thumb"> | |
<img src="https://gist.githubusercontent.com/jonsadka/d0aebe637bc205f8c9152b861f362b28/raw/1da30ff869fc56142fe2df869489cd389caf3cf2/thumbnail.png" height="340" width="510" alt=""> | |
<span class="shadow cover"></span> | |
</figure> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="ItemCard"> | |
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/482005612916b3f5e408" target="_blank"></a> | |
<figure class="ItemCard__thumb"> | |
<img src="https://gist.githubusercontent.com/jonsadka/482005612916b3f5e408/raw/7c05bc7b136a269d39e87138d745c368f69560f0/thumbnail.png" height="340" width="510" alt=""> | |
<span class="shadow cover"></span> | |
</figure> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="ItemCard"> | |
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/274fe6247fd561425296" target="_blank"></a> | |
<figure class="ItemCard__thumb"> | |
<img src="https://gist.githubusercontent.com/jonsadka/274fe6247fd561425296/raw/f6d5295a3fc4353a035154373896e3b3083db4cc/thumbnail.png" height="340" width="510" alt=""> | |
<span class="shadow cover"></span> | |
</figure> | |
</div> | |
</div> | |
</div> | |
</body> |