CSS3 变换：rotateY 在 Safari 和 Chrome 中的行为不同答案

【问题标题】：CSS3 transform: rotateY behaves different in Safari and ChromeCSS3 变换：rotateY 在 Safari 和 Chrome 中的行为不同
【发布时间】：2012-04-25 23:15:17
【问题描述】：

我想在 <ul> 列表上使用 CSS3 转换，其中包含许多 <li>，其中包含用 <a> 包裹的 <img>。

请参考http://jsfiddle.net/h2T8j/1/

我想实现 <ul> 旋转 Y 一定角度并将所有 <li> 旋转 Y 相同角度但方向相反，以使它们沿倾斜路径看起来是直立的。

但结果在 Chrome（9.0.1084.30 beta）和 Safari（v5.1.5）中看起来不同。

我已尝试从<ul> 中删除-webkit-perspective-origin: 0% 0%，但结果将浮出<li> 元素。如果我尝试将点击事件附加到 <li> 元素，它将无法在 Safari 上运行。

see the result in Chrome

compared to the result in Safari

有没有办法让它们在两个浏览器中以相同的方式工作？

谢谢。

【问题讨论】：

是的......我想你可能在那里发现了一个错误。 ul 上的 -webkit-perspective-origin: 0% 0%; 在 Chrome 中适当地扭曲了 li a img 的视图，但在 Safari 中则不然。如果您删除它，它会在两者中正确显示，但正如您所说，浏览器在 Safari 中将其框定错误，您无法单击 li a img 的相应部分。
透视尚未在 Chrome 中实现。您可以称其为错误，但实际上并未实现。
我认为使用 -webkit-perspective-origin 应该同时针对 chrome 和 safari。所以没有办法解决这个问题？

标签： css css-transforms

【解决方案1】：

问题是<ul> 非常宽。其实10000px。所以如果<ul> 距离屏幕只有400px，它看起来不会很好。所以我建议-webkit-perspective 应该放大。我试过把它改成这样：

ul#looks {
    list-style: none;
    width: 10000px;
    position: relative;
    height: 100%;
    -webkit-perspective-origin: 0% 0%;
    -webkit-perspective: 10000px;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: perspective(400px) rotateY(10deg);
  }

我希望这会有所帮助。

【讨论】：

感谢您的建议，即使它不适用于这种情况。更改<ul> 上的-webkit-perspective 会影响您查看<li> 时的距离。 <ul> 的长度为 10000 像素，因为它将有很多 <li>。我不知何故需要使用 % 作为 left 属性。如果没有，我可以这样做jsfiddle.net/9ymxw，我可以得到我想要的......