Skip to content

Instantly share code, notes, and snippets.

@salehahmadbabu

salehahmadbabu/perspective.html

Created May 22, 2018 16:29
Show Gist options
  • Save salehahmadbabu/7ad3259b94be6277f6b711f443de6ecd to your computer and use it in GitHub Desktop.
Save salehahmadbabu/7ad3259b94be6277f6b711f443de6ecd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
perspective.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#perspective {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-perspective: 2500px;
perspective: 2500px;
}
#grid {
padding-right: 1em;
position: absolute;
top: 0;
right: 0;
width: 1000px;
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
padding-bottom: 15px;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
transform-origin: top right;
padding-left: 15px;
-webkit-transform: rotateX(50deg) rotateZ(-40deg);
-moz-transform: rotateX(50deg) rotateZ(-40deg);
transform: rotateX(50deg) rotateZ(-40deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 1;
}
#grid a {
display: block;
margin-bottom: 15px;
margin-left: 15px;
border-radius: 15px;
background-color: rgba(0, 0, 0, .2);
box-shadow: -5px 5px 5px 5px rgba(0, 0, 0, .2);
/*this breaks it.
transform-style: preserve-3d;
*/
}
#grid .brick {
display: inline-block;
width: 100%;
height: 200px;
border-radius: 15px;
box-shadow: -5px 5px 0 0 #999;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
transform-origin: bottom;
background-color: blue;
border: 1px solid white;
}
#grid a:hover .brick, #grid .brick:hover {
-webkit-transform: rotateX(-20deg);
-moz-transform: rotateX(-20deg);
transform: rotate3d(1, 0, 0, -20deg);
z-index: 2;
box-shadow: -5px 2px 0 0 #999;
}
</style>
</head>
<body>
<div id="perspective">
<div id="grid">
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
<a href="#test"><span class="brick"></span></a>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment