Trying to create a block grid that is 3d transformed at some angle, then when you hover one of the elements it rotates in facing towards the user. Look below to see a not-very-well working example (Chrome only - does it work for Safari too?).
So I have a couple of problems with this I think you can notice them too, I hope they are solvable at all;
- rotating the blocks towards the user doesnt work well. The perspective seems to be wrong: on the last rows it looks like its going to a different angle. And I need to also do a scale(1,1.9) which shouldn't be necessary I think, but else they all get a small height.
- The perspective changes as you drag the screen to a smaller size...
- Finally the animation (in my chrome) doesn't always go fluently. Sometimes it does, but on some occasions the block first stretches and then rotates at once
How to solve this?
Or did anyone already build something like this before?
you can see what I mean here on jsfiddle (make the run-screen wide)
CSS:
body{
-webkit-perspective: 1000;
background:black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#grid{
margin:auto;
width:840px;
-webkit-transform: rotate3d(1,0,0, 70deg);
margin-top:200px;
}
#grid>div{
-webkit-perspective: 600;
-moz-perspective: 600;
perspective: 600;
color:white;
font-family:Arial;
font-size:70px;
line-height:140px;
height:140px;
width:140px;
float:left;
text-align:center;
cursor:pointer;
position:relative;
}
#grid div:hover{
z-index:500;
}
#grid>div:hover div{
-webkit-transform: rotate3d(1,0,0, -39deg) scale(1,1.9);
-moz-transform: rotate3d(1,0,0, -39deg) scale(1,1.9);
transform: rotate3d(1,0,0, -39deg) scale(1,1.9);
}
#grid>div>div{
-webkit-transform-origin:50% 100%;
width:100%;
height:100%;
-webkit-transition:-webkit-transform ease 0.5s;
-moz-transition:-moz-transform ease 0.5s;
transition:transform ease 0.5s;
}
#grid>div:nth-child(4n)>div{background:red;}
#grid>div:nth-child(4n+1)>div{background:orange;}
#grid>div:nth-child(4n+2)>div{background:blue;}
#grid>div:nth-child(4n+3)>div{background:green;}
#grid>div:nth-child(6n+1){-webkit-perspective-origin: 300% 100%;-moz-perspective-origin: 300% 100%;}
#grid>div:nth-child(6n+2){-webkit-perspective-origin: 200% 100%;-moz-perspective-origin: 200% 100%;}
#grid>div:nth-child(6n+3){-webkit-perspective-origin: 100% 100%;-moz-perspective-origin: 100% 100%;}
#grid>div:nth-child(6n+4){-webkit-perspective-origin: 0% 100%;-moz-perspective-origin: 0% 100%;}
#grid>div:nth-child(6n+5){-webkit-perspective-origin: -100% 100%;-moz-perspective-origin: -100% 100%;}
#grid>div:nth-child(6n+6){-webkit-perspective-origin: -200% 100%;-moz-perspective-origin: -200% 100%;}
HTML:
<div id="grid">
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
</div>