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

Question

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

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

我对父级div的设置大约为1500px，并且列表div设置为继承透视。但是，当这个可滚动的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);
}

编辑：Repro here： http://codepen.io/anon/pen/LqAhK

请注意，当您向下滚动列表时，应用透视图就好像视口与列表本身一样高，而不是容器 - 根据您在列表中的位置产生不同的效果！如何才能使用容器的尺寸将透视图应用于列表项？

我最好的解决方法是冻结列表并在click事件上设置静态高度，但这有一些副作用，并且是一个有点hacky的解决方案！

Answer 1

我不确定这是否是您正在寻找的，但是......

ul.list li {
  perspective: inherit;
}

...更改它以使<li>元素本身重置透视图而不是容器<ul>，似乎使所有元素看起来都相同。

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