I am attempting to utilize CSS transforms to create a flat 'floor' that extends infinitely towards the horizon. The vanishing point, where the floor disappears into the distance, should align halfway up the browser window.
I have encountered an issue with setting up the perspective transform without hard-coding a size; the perspective: CSS property necessitates an absolute value. Although I came across perspective-origin:, which supposedly allows me to position the vanishing point, it does not behave as expected.
Below is some example code:
<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);
}
(Link to JSFiddle: http://jsfiddle.net/u29qk8a8/)
Upon resizing the preview pane in the fiddle, I discovered that although the vanishing point moves, it does so erratically --- sometimes even shifting off the screen if the pane becomes very small. Furthermore, its alignment is never close to the middle as intended.
The official specification appears convoluted, and existing references provide little clarity. Can anyone offer more insight and hopefully a resolution?