3

ここに画像の説明を入力してください

上の画像は、Chrome、Safari、MobileSafariで発生している問題を正確に表しています。Chromeが-webkit-transform-origin-zを正しく処理しているように見えますが、他の2つのブラウザは異なる結果を示します。すべてのブラウザで赤いボックスとその位置を詳しく見てください。

これを再現するために使用されるコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid black;
-webkit-transform-style: preserve-3d;
}

#div2
{
-webkit-perspective: 500;
}

#div3
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform: rotateY(45deg);
-webkit-transform-origin: 20% 40% 200px;
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2"><div id="div3">HELLO</div></div>
</div>

</body>
</html>

統一されたソリューションにつながる手がかりを提案することを歓迎します！

ありがとうございました。

4

1 に答える 1

0

Safari ウィンドウのサイズが異なるため、Web サイトのパラメーターが変更されます。同じ理由で、Safariモバイルでも白い四角が200x200ではないことに気付きました。

于 2013-07-15T21:18:03.433 に答える