是否可以在用transform：perspective（）转换的元素上设置透视原点？

问题描述

TL; DR：可以为透视直接通过设置消失点（ perspective-origin code>透视透视： transform：perspective（）

您可以在。在第二组元素中，我希望每个元素都有自己的消失点，我可以指定。

讨论： >

对于由父项定位的元素，可以很容易地设置消失点（ perspective-origin ）。假设我在容器中有两个 div ：

 < div id =cont1class =cont> 
< div id =aclass =box>< / div> 
< div id =bclass =box>< / div> 
< / div> 
  

然后，我可以给他们透视和一个共同的消失点：

 ＃cont1 {
 -webkit-perspective：400; 
 -webkit-perspective-origin：100％100％; 
} 
 
＃cont1 .box {
 -webkit-transform：rotateX（-35deg）; 
} 
  

您可以在。

但是，可以在用透视变换 c>，就像第二个例子：

 < div id =cont2class =cont> 
< div id =cclass =box>< / div> 
< div id =dclass =box>< / div> 
< / div> 
 
 
＃cont2 .box {
 -webkit-transform：perspective（400）rotateX（-35deg）; 
} 
  

我找不到办法。不管是什么，第二个例子中的元素的消失点直接在它们的后面。

解决方案

透视集 transition ， transition-origin 扮演 perspective-origin 。

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.

解决方案

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

这篇关于是否可以在用transform：perspective（）转换的元素上设置透视原点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！