Question

enter image description here

上图完全描述了Chrome，Safari和Mobile Safari的问题。似乎Chrome正确处理-webkit-transform-origin-z而其他两个浏览器呈现不同的结果。请仔细查看红色框及其在所有浏览器中的位置。

用于重现此代码的代码是：

<!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>

欢迎您提出任何可以提供统一解决方案的线索！

谢谢。

Answer 1

因为您的Safari窗口大小不同，会更改网站的参数。由于同样的原因，我在Safari手机上意识到白色方块不是200x200。

-webkit-transform-origin-z在Chrome，Safari和Mobile Safari中

1 个答案: