尝试创建一个以某个角度进行 3d 变换的块网格，然后当您将其中一个元素悬停时，它会面向用户旋转。在下面查看一个不太好用的示例（仅限 Chrome - 它也适用于 Safari 吗？）。
所以我有几个问题，我想你也可以注意到它们，我希望它们是可以解决的；
- 向用户旋转块效果不佳。观点似乎是错误的：在最后几行中，它看起来像是转向了不同的角度。而且我还需要做一个规模（1,1.9），我认为这不应该是必要的，但否则它们都会得到一个很小的高度。
- 当您将屏幕拖到更小的尺寸时，视角会发生变化...
- 最后，动画（在我的 chrome 中）并不总是流畅。有时确实如此，但在某些情况下，块首先拉伸然后立即旋转
如何解决这个问题？或者之前有没有人建造过这样的东西？
您可以在 jsfiddle 上看到我的意思（使运行屏幕变宽）
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>