Try*_*ace 4 css 3d transform css3 perspective
我正在尝试使用以下多维数据集获取透视视角:
http://jsfiddle.net/TrySpace/JvFSQ/5/
但我没有按照我的预期行事,我希望改变实际的视角.所以什么时候transformOrigin: Xpos+'%'+Ypos+'%'是100%-100%.我期望视角来自右下角,并看到立方体的右/底侧.但它似乎只是放大立方体.
我正在使用jstransit,因为设置.css( perspective-origin: X% X% )通过jQuery似乎没有做任何事情.
我想我还没完全理解3d CSS.
谁能看到我哪里出错了？
(Update1:当我编辑第一个<section>:并设置:transform: rotateY(1deg) rotateX(1deg),它似乎做得更少.好像转换必须发生,视角改变？http://jsfiddle.net/TrySpace/JvFSQ/6/)
(Update2:所以,当我将Y&X设置为90deg时,我会得到一些我想要的东西,尽管反过来.我的思路在哪里出错了？http://jsfiddle.net/TrySpace/JvFSQ/8/)
在transform-origin不改变视角.它改变了rotation变换的中心.
该perspective-origin 该怎么改变perspective属性计算消失点.这涉及一些"观点".
现在,我不确切地知道你想要实现什么(所以我的"解决方案"在这里可能不完全是你想要的),但我认为将导致你朝着正确方向前进的是设置你的代码来改变这个属性article具有perspective属性集的包装器.
它将脚本的最后一行更改为
$("article").css({ perspectiveOrigin: Xpos+'% '+Ypos+'%' });
并重置transform-origin你section的transform-origin: 50% 50% 0px;.我不认为这是你想要的,但我认为你想要的功能更接近你的期望.