Question

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

请参阅http：// jsfiddle.net/h2T8j/1 /

我想要实现<ul>旋转Y一定程度，并将<li>所有-webkit-perspective-origin: 0% 0%旋转相同的角度但相反的方向使它们沿着倾斜的路径直立。

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

我尝试从<ul>中移除<li>，但结果将浮出<li>元素。如果我尝试将点击事件附加到{{1}}元素，则无法在Safari上使用。

see the result in Chrome

compared to the result in Safari

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

谢谢。

Answer 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);
  }

我希望这会有所帮助。

CSS3转换：rotateY在Safari和Chrome中表现不同

1 个答案: