一个长的、可滚动的 div 的 CSS 透视图

Question

我有一个点击样式，涉及点击时通过 3D 旋转倾斜元素。这是它的样子:

和here is a GIF of the effect working properly with a short list !

我把parent div的perspective设置在1500px左右，list div设置为inherit perspective。但是，当这个可滚动的 div 变得很长时，当您单击列表底部的元素时，您会开始看到这样的效果:

我假设这是因为透视应用于 div 的整个高度，而不仅仅是可见高度。我试图通过从父 div 继承列表 div 的视角来解决这个问题(谁的高度只是可见区域)，但这没有效果。

关于如何解决这个问题有什么想法吗？

谢谢!

编辑:相关 HTML:

<div class="container">
    <ul class="artists">
        <li>38 Special</li>
        <li>A Flock Of Seagulls</li>
        <!-- etc. -->
    </ul>
</div>

相关 CSS:

div.container {
    position: relative;
    height: calc(100% - 120px);
    overflow: hidden;
    perspective: 1500px;
}

ul.artists {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    /* Animation stuff, list styles, etc */
    perspective: inherit;
    overflow-y: auto;
    overflow-x: hidden;
}

按下后，列表项将应用如下样式:

{
    transform: rotate3d(4.05, 6.1635, 0, 15deg);
}

编辑:在此处重现: http://codepen.io/anon/pen/LqAhK

请注意，当您向下滚动列表时，视角的应用方式就好像视口(viewport)与列表本身一样高，而不是容器 - 根据您在列表中的位置，会产生不同的效果!如何仅使用容器的尺寸将透视应用到列表项？

我最好的解决方法是卡住列表并在点击事件上设置一个静态高度，但这有一些副作用并且是一个有点老套的解决方案!

Answer 1

我不确定这是否是您要找的，但是...

ul.list li {
  perspective: inherit;
}

...更改它以便 <li>元素本身是重置视角的，而不是容器 <ul> , 似乎使所有元素看起来都一样。

http://codepen.io/anon/pen/zGpKk