TL;DR: Is it possible to set the vanishing point (perspective-origin) for an element that is given perspective directly via transform: perspective(), as opposed to inheriting it from a parent via perspective:?
You can see an example at http://jsbin.com/fevik/2/edit. In the second set of elements, I would like each element to have its own vanishing point that I can specify.
Discussion:
It's easy to set the vanishing point (perspective-origin) for elements that are 3D-positioned by their parent. Supposing I have two divs inside a container:
<div id="cont1" class="cont">
<div id="a" class="box"></div>
<div id="b" class="box"></div>
</div>
Then, I can give them perspective and a common vanishing point with:
#cont1 {
-webkit-perspective: 400;
-webkit-perspective-origin: 100% 100%;
}
#cont1 .box {
-webkit-transform: rotateX(-35deg);
}
You can see the result in the first set of transformed elements at http://jsbin.com/fevik/2/edit.
Is it possible, however, to set the perspective-origin on elements that are transformed with perspective-transform, like in the second example:
<div id="cont2" class="cont">
<div id="c" class="box"></div>
<div id="d" class="box"></div>
</div>
#cont2 .box {
-webkit-transform: perspective(400) rotateX(-35deg);
}
I can't find a way. No matter what, the elements in the second example have their vanishing point directly in the middle behind them.
