25

私は3D変換を使用してプリズム回転効果を構築してきました。このtransform-origin-zプロパティはプリズムの面を変換するのに最適のように見えましたが、Safari5とMobileSafariは、変換が適用されていない場合でも、私の要素を不可解に引き伸ばします。Firefox12とChrome18は正しく機能します。

ライブデモ

フルプリズムデモ

なぜこれが起こるのかを理解することに興味があります。完全に回避transform-origin-zする必要がありますか、それともSafariとMobile Safariの回避策はありますか？

スクリーンショット

<style>
  /* other browser prefixes omitted for brevity */
  .container {
    margin: 50px;
    border: 2px solid #00f;
    height: 50px;
    -webkit-perspective: 500px;
  }
  .face {
    height: 50px;
    background-color: rgba(255,0,0,0.5);
    -webkit-transform-origin: center center -25px;
    -webkit-transform: translate3d(0,0,0);
  }
</style>

<div class="container">
  <div class="face"></div>
</div>​
4

3 に答える 3

14

これはSafariのバグのようです。Chromeは変換中心をZ軸上に移動し、Safariはこの中心をそのままにしますが、オブジェクト自体をZ軸上に移動します。したがって、オブジェクトはSafariでズームされ、大きく見えます。

今のところ、transform-origin（Z軸上）を避け、translate-Zを使用して同じ効果を生成します。

例：

http://jsfiddle.net/willemvb/GuhcC/3/

于 2012-10-08T15:48:16.993 に答える
2

次の説明は、Safariが「なぜ」それが何であるかを実行している理由に答えると思います

テストのためにSafariにアクセスすることはできませんが、perspectiveプロパティの仕様（あなたが指しているのと同じ仕様ページ）を読んでいると、次のように述べられています。

'perspective'プロパティは、perspective（）変換関数と同じ変換を適用しますが、要素自体の変換ではなく、要素の配置または変換された子にのみ適用される点が異なります。

上記の仕様の読み方に関する最新情報

'perspective'プロパティは、perspective（）変換関数と同じ変換を適用します

transform: perspective(500px)これは、この場合に適用されたかのように、パースペクティブ変換が実行されることを示しています。

ただし、要素の配置または変換された子にのみ適用されます

これは、パースペクティブ変換が子要素（この場合）に適用されることを示しています.face。ここでは、あいまいさがいくつかあるようです。これは、子要素で別の変換が行われた場合にのみパースペクティブを適用する必要があるということですか？また、tranform-originプロパティは子に対して実行されている変換としてカウントされますか（特に、perspective変換に直接関連するのはこの値であるため）？ブラウザが異なっているように見えるのは、このあいまいな点です。子要素がに設定されているため、 Safariはperspective変換を実行していますが、他の要素は明らかにそうではありません（少なくとも、実際の他の要素がアニメーション中に何か他のことを行うまでは）。tranform-origin-25pxtransform.face

要素自体の変換ではありません

これは、このプロパティからの変換がに影響を与えるのではなく、の子（つまり）に影響を与えるため、z=0の.containerは無関係であることを示しています。.container.container.face

したがって、Safariは、を設定しているため、.face 常に変換が適用されているように見えます。したがって、子要素（この場合）には常に変換が適用されています。.container-webkit-perspective: 500px;perspective.face

transform: perspective(500px)アニメーションを削除して実際に適用すると、FirefoxまたはChromeで、Safariでコードを使用した.face場合と同じ結果が表示されることに注意してください。

ですから、実際には、Safariは正しく機能している可能性がありますが、FirefoxとChromeはおそらくそうではありません。仕様にはあいまいさがあります。他の2つのブラウザは、Safariのようにベースのパースペクティブ変換をまだ適用しているはずです.containerが、確かにそうではないように見えますが、Safariは明らかにそうであるように見えます。

この問題を解消するには（「静止」時に「突き出て」いないようにするため）、おそらく次のことを行う必要があります。

  1. アニメーションの最初に自分自身をアニメーション化する（そして後でtransform-originリセットする）、または...0
  2. 「静止」時とアニメート時のperspective値自体をアニメートします。0500px

私の推測では、＃1の方が実装が簡単ですが、はっきりとはわかりません。

于 2012-05-02T19:21:49.113 に答える
1

なぜこれが私のために働いたのか分かりません。すべてのブラウザで動作するようです。基本的に、css宣言の効果をキャンセルしていると思います。

.container {
   perspective: 500px;
   transform-origin: 50% 50% 25px;
}
于 2016-07-25T10:11:53.157 に答える