Is it possible to set perspective-origin on elements that are transformed with transform: perspective()?

问题

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.

回答1:

It appears that with perspective set via transition, transition-origin plays the role of perspective-origin.

来源：https://stackoverflow.com/questions/24854509/is-it-possible-to-set-perspective-origin-on-elements-that-are-transformed-with-t

标签

css

css3