1

ラップされた with を含む<ul>多くのリストでCSS3 変換を使用したいと考えています。<li><img><a>

http://jsfiddle.net/h2T8j/1/ を参照してください。

私<ul>は、ある角度で回転<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 に答える