gpt4 book ai didi

javascript - -webkit-transform-origin-z 在 Chrome、Safari 和 Mobile Safari 中

转载 作者:行者123 更新时间:2023-11-30 06:37:37 25 4
gpt4 key购买 nike

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>

欢迎您提出任何有助于统一解决方案的线索!

谢谢。

最佳答案

因为您的 Safari 窗口大小不同,这会改变网站的参数。由于同样的原因,我意识到白色方 block 在 Safari 移动设备上也不是 200x200。

关于javascript - -webkit-transform-origin-z 在 Chrome、Safari 和 Mobile Safari 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13516973/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com