Question

我尝试使用CSS转换来创建一个平面＆＃39;它消失在无穷远处。消失点的地平线需要在浏览器窗口的一半处。

我发现我无法以不涉及硬编码大小的方式设置透视变换; perspective: CSS属性需要绝对大小。我找到perspective-origin:，声称让我设定了消失点的位置，但它似乎没有达到我的预期。

以下是一些示例代码：

<div id="container"><div id="floor"/></div>

#container
{
    perspective: 100px;
    perspective-origin: 50% 50%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#floor
{
    background-color: red;
    position: fixed;
    left: 0;
    right: 0;
    top: -50000%; /* extend the element to 'infinity' */
    bottom: 0;
    transform-origin: 50% 100%;
    transform: rotateX(30deg);
}

（JSFiddle here http://jsfiddle.net/u29qk8a8/）

如果你在小提琴中调整预览窗格的大小，你会发现虽然消失点确实在移动，但它并没有以非常连贯的方式这样做 - 如果你使窗格非常小它甚至会离开屏幕。并且它从来没有接近中间。

实际规格非常不透明，我发现的参考文献同样没有说明。任何人都可以扩展，并希望提供解决方案吗？

Answer 1

解决方案：我是个白痴！ #floor变换中的rotateX()应为90deg，而不是30deg。是的，已经很晚了。

使用CSS转换定位消失点

1 个答案: