1

我想在一个<ul>列表上使用 CSS3 转换，<li>其中包含一个<img>用<a>.

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

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

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

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

在 Chrome 中查看结果

与 Safari 中的结果相比

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

谢谢你。

4

1 回答 1

0

问题是<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);
  }

我希望这有帮助。

于 2012-04-25T15:15:17.583 回答