Chrome，Safari和Mobile Safari中的-webkit-transform-origin-z
[英]-webkit-transform-origin-z in Chrome, Safari and Mobile Safari
问题描述
The image above depicts exactly the problem i am having with Chrome, Safari and Mobile Safari. 
上面的图像准确地描述了我在使用Chrome，Safari和Mobile Safari时遇到的问题。 It seems as if Chrome is handling the -webkit-transform-origin-z correctly while the other two browsers present different results. Chrome似乎在正确处理-webkit-transform-origin-z，而其他两种浏览器显示的结果却不同。 Please take a closer look at the red box and its position in all browsers. 请仔细查看红色框及其在所有浏览器中的位置。
The code used to reproduce this is: 用于重现此代码是：
<!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>
You are welcome to suggest any clue that will lead to a unified solution! 欢迎您提出任何线索，以寻求统一的解决方案！
Thank you. 谢谢。
1 个解决方案
解决方案1
0 2013-07-15 21:18:03
because your Safari window is in a different size which changes the parameters of the website. 因为您的Safari窗口大小不同，这会更改网站的参数。 I realized the white square is not 200x200 either on Safari mobile because of same reason. 由于相同的原因，我意识到Safari移动设备上的白色方块也不是200x200。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.