CSS 3D变换透视网格

Question

尝试创建一个块级网格，以某个角度进行3D变换，然后当您将鼠标悬停在其中一个元素上时，它会旋转并面向用户。请查看下面的示例（仅限Chrome- Safari也可以工作吗？）。

所以我认为这有几个问题，我希望您也能注意到，我希望它们都可以解决：

- 将块旋转面向用户效果不佳。透视似乎是错误的：在最后一行上，它看起来像是朝着不同的角度前进。而且我还需要进行scale（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>  

- Hacktisch

Answer 1

关于您的问题：

1. The perspective seems to be wrong. Yes, because it is. you need to specify "preserve-3d". If not, the grand-child is rendered over the child, and this one over the base element. The bad news is that property doesn't work in I.E.; so that if you set it will fix it in most browser except I.E.; Also, since I.E. is using the unprefixed syntax, that would make your code not future proof. Just for the demonstrative purposes, it would be that:

   #grid{
       margin:auto;
       width:840px;
       -webkit-transform: rotate3d(1,0,0, 70deg);
       -webkit-transform-style: preserve-3d; 
       margin-top:200px;
   }
   #grid>div{
       -webkit-perspective: 600;
       -moz-perspective: 600;
       perspective: 600;
       -webkit-transform-style: preserve-3d;
       color:white;
       font-family:Arial;
       font-size:70px;
       line-height:140px;
       height:140px;
       width:140px;
       float:left;
       text-align:center;
       cursor:pointer;
       position:relative;
   }
   

您会发现现在 div 的增长过度; 我将其留作演示目的。

1. 在较小的尺寸下，透视发生了变化。这是因为您没有在 body 中设置透视原点。如果您设置

   body { -webkit-perspective: 1000; -webkit-perspective-origin: 420px 0px;
   background: black; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

那就可以解决问题了。

关于动画表现奇怪的问题; 我无法重现它。

更新演示

- vals