问题标签 [webkit-perspective]

我找不到答案的“简单”问题——-webkit-perspective在数学上实际上做了什么？（我知道它的效果，它基本上就像一个焦距控制）例如是什么-webkit-perspective: 500意思？！？

我需要找到被移动的东西的屏幕位置，除其他外，-webkit-perspective

基于透视的旋转：我有一个 div，我想使用 webkit 在 CSS3 中旋转。div 在 jquery 中的用户鼠标按下事件后旋转

我使用关键帧来做到这一点

我的问题是我还应用了 webkit 透视图来提供 3d 视图，并且我必须旋转 div 以保持透视 X 角为 45 度......这怎么可能？

我编写了使用 -webkit-transform、-webkit-perspective 和几个类似的 CSS。我的设计在可以使用硬件加速但实际上无法使用的机器上看起来很像蜜蜂。如何检查硬件加速可用性并提供备用 CSS？

旁注：运行 chrome://gpu-internals/ 以手动检查可用性。

我在 div 中定位 3d 转换元素时遇到两个问题。在下图中，粉色方块是 10 面“轮子”的容器。透视原点设置在每个 div 的中间。

第一个问题（左轮）是轮子不在 div 中垂直居中。我可以使用 translateY 人为地向下移动滚轮，但翻译的确切数量因设备而异（例如，PC 上的 Chrome 与 Android 上的 Chrome 不同）。为什么轮子不垂直居中？

第二个问题（右轮）是如果我将轮子的高度设置为 1em 以外的值并沿 X 轴旋转轮子，轮子不会从其中心旋转，因此似乎在 div 内摆动。这看起来很奇怪，因为轮子的高度真的不是 1em，而是 3.077em。为什么会这样？

完整的动画示例在这里：http: //jsfiddle.net/dhApe/2/。无前缀版本（适用于 Firefox）：http: //jsfiddle.net/dhApe/3/

主要的 CSS 规则：

在这个具有不同视角的立方体示例中：http: //codepen.io/HugoGiraudel/pen/GLbca

右边的有-webkit-perspective: 250px;，左边的有-webkit-perspective: 1000px;

根据 Mozilla：“透视 CSS 属性确定 z=0 平面和用户之间的距离，以便为 3D 定位的元素提供一些透视。z>0 的每个 3D 元素都会变大；每个 z 的 3D 元素<0 变小。效果的强度由该属性的值决定。"

在这种情况下，右边的立方体应该离用户更近 750px，那么为什么它没有比左边的那个大很多呢？同样，如果您打开开发工具并将透视图更改为像 10000 像素这样的巨大数字，立方体将保持相同的大小。不应该很小吗？

这是代码：这不是我的，所以所有的功劳归于http://codepen.io/HugoGiraudel/

和CSS：

当您transform在 div 上使用时，绝对定位不再像您预期的那样工作，并且似乎需要手动计算。例如，当您希望 div 位于容器底部时，您可以：

但是如果你转换这个 div 就像-webkit-transform:rotateX(angle);它不会在容器的底部一样。容器之间的某个地方取决于它的大小。

我创建 jsfiddle 来说明这一点，并展示我想要实现的目标：http: //jsfiddle.net/9NHJt/

这是我使用的代码：

那么，有没有办法在没有 javascript 的情况下解决这个问题？或者如何用js计算正确的底部位置？

我的旧 XP 系统上的 NVIDIA Quadro FX 1500 图形适配器相当旧，似乎不在受支持的 Chrome HW 列表中；但是，我设法在 Chrome 上启用了 3d 转换，使用以下方法：

1. 在地址栏中，转到 chrome://flags/
2. 覆盖软件渲染列表 -> 启用

现在我正在寻找类似的技巧来在 Opera 12.16 上启用 3d css。

使用此页面完成测试：http: //jsfiddle.net/amustill/Qh8YV/，它显示了一个简单的 3d 旋转 div。该测试在 FF、Safari、Chrome 上成功，但在 Opera 上失败。

与这个简单的测试类似的结果：

div 在 Opera 上没有旋转。

在 Opera 的错误控制台中，我发现了这些消息：

铬，火狐：

歌剧：

问题：

1. Opera 是否支持 3d 转换？
2. 如果是：问题可能是什么 - 旧硬件？，代码？
3. 有解决方法吗？

我正在尝试创建一个带有 4 个按钮的菜单，每个按钮在悬停时具有相同的 3d 效果，但似乎透视应用于父元素而不是单个元素。

这是它的样子：

第一个元素实际上是悬停在上面（光标已从屏幕截图中删除）。

HTML：

CSS：

如果我删除 div 包装器并将透视图直接应用于 li ，也会出现同样的问题。如果我根本不使用透视，即使旋转更小，当光标移动到任何 li 元素的右侧 50% 上时，它也会从悬停状态交替变化（效果与光标指针一样变化）。

我究竟做错了什么？

我有一个场景，其中 2 个渲染器的大小完全相同，并且彼此叠放，共享同一个透视相机，如下所示：

CSS 对象可以直接放置在 WebGL 场景中的对象之上，只需参考它们的位置并设置 CSS 对象的位置。

但是，当我添加此效果时：

并像这样调用作曲家来渲染composer.render();

我的 CSS 对象不再正确放置。

透视是关闭的，因为缩放会滑动 CSS 对象，而 WebGL 对象会保留它们的位置。

知道为什么额外的着色器通道可能会改变 WebGL 渲染中的透视图，导致 CSS 对象无法正确对齐并四处滑动吗？

我对透视属性有一个错误。如果您在 Google Chrome (v33) 和 Mozilla Firefox (v28) 上看到此 JSFiddle 代码，我认为它们之间存在差异。如果我评论代码，我可以在 Chrome 上重现此错误：

如何在两个浏览器上获得相同的结果？

感谢大家的帮助，并为我糟糕的英语感到抱歉。