Question

尝试创建一个以某个角度进行三维变换的块网格，然后当您将其旋转的一个元素面向用户时。请看下面看到一个不太好用的示例（仅限Chrome - 它是否适用于Safari？）。

所以我有几个问题，我想你也可以注意到它们，我希望它们可以解决;

向用户旋转块不起作用。透视似乎是错误的：在最后一行，它看起来像是一个不同的角度。我还需要做一个比例（1,1.9），我认为这不应该是必要的，但是它们都有一个很小的高度。
当您将屏幕拖动到较小的尺寸时，透视图会发生变化......
最后，动画（在我的chrome中）并不总是流利的。有时会这样，但在某些情况下，块首先伸展然后立即旋转

如何解决这个问题？或者之前有人已经建立过这样的东西吗？

你可以看到我的意思here on 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>

Answer 1

关于你的问题：

透视似乎是错误的。是的，因为它是。你需要指定“preserve-3d”。如果没有，则将子孙呈现在孩子身上，而这个孩子将在基本元素上呈现。坏消息是财产在I.E中不起作用;因此，如果你设置它将在大多数浏览器中修复它，除了I.E。;此外，自I.E。正在使用未加前缀的语法，这将使您的代码不再适用于未来。仅仅出于示范目的，它将是：

#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过度增长;我把它留作演示目的）

透视图会以较小的尺寸发生变化。这是因为您没有将透视原点放在体内。如果你设置

body { -webkit-perspective：1000; -webkit-perspective-origin：420px 0px;
背景：黑色; -webkit-background-size：cover; -moz-background-size：cover; -o-background-size：cover; 背景尺寸：封面; }

这将解决它

关于动画表现奇怪;我一直无法重现它。

Updated demo

CSS 3d变换透视网格

1 个答案: