Javascript -Chrome、Safari和Mobile Safari中的webkit-transform-origin-z
上图正是我在Chrome、Safari和Mobile Safari上遇到的问题。Chrome似乎正确处理了-webkit-transform-origin-z，而其他两个浏览器则呈现出不同的结果。请仔细查看红色框及其在所有浏览器中的位置 用于重现此信息的代码是：Javascript -Chrome、Safari和Mobile Safari中的webkit-transform-origin-z,javascript,google-chrome,css,safari,mobile-safari,Javascript,Google Chrome,Css,Safari,Mobile Safari,上图正是我在Chrome、Safari和Mobile Safari上遇到的问题。Chrome似乎正确处理了-webkit-transform-origin-z，而其他两个浏览器则呈现出不同的结果。请仔细查看红色框及其在所有浏览器中的位置 用于重现此信息的代码是： <!DOCTYPE html> <html> <head> <style> #div1 { position: relative; height: 200px; width: 200px;
<!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>
#第一组
{
位置：相对位置；
高度：200px；
宽度：200px；
利润率：100像素；
填充：10px；
边框：1px纯黑；
-webkit变换样式：保留-3d；
}
#第二组
{
-webkit透视图：500；
}
#第三组
{
填充：50px；
位置：绝对位置；
边框：1px纯黑；
背景色：红色；
-webkit变换：旋转（45度）；
-webkit转换源：20%40%200px；
}
你好
谢谢。因为您的Safari窗口大小不同，会更改网站的参数。出于同样的原因，我意识到Safari mobile上的白色方块也不是200x200。请阅读：我测试的所有浏览器都是基于Webkit的，所以情况并非如此。