当我对图像应用变换时，它以二维方式变换。透视似乎不起作用。然而它在 opera/chrome 中是完美的。 当我应用于图像的 div 时，透视效果很好。 这是我的代码:-
<!DOCTYPE html>
<html>
<head>
<title>Testing Scripts</title>
<!--[if lte IE 8]><script src="script/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="slider">
<div class="sliced"><img src="images/1.jpg"></div>
</div>
</body>
</html>
样式.css
body {
width: 960px;
margin: 100px auto;
}
.slider {
-webkit-perspective : 600px;
-moz-perspective : 600px;
position: relative;
}
.sliced {
position: absolute;
}
.sliced img{
-webkit-transform : rotateX(80deg);
-moz-transform : rotateX(80deg);
}
如果我把它改成
.sliced{
-webkit-transform : rotateX(80deg);
-moz-transform : rotateX(80deg);
}
它完美地工作。 任何原因或我错过了什么？ Here is my code pen
最佳答案
在 Firefox 中，必须在应用转换的父级应用透视图。 (我不知道为什么)。
因此，对于关系为 slider > sliced > img 的 HTML，您的 CSS 不起作用(slider 不是 img 的父级)。如您所说，如果您旋转切片，它就会起作用。
另一种让它工作的可能性是设置
.slider {
-webkit-perspective : 600px;
position: relative;
}
.sliced {
-moz-perspective : 600px;
}
这样，透视就在图像的父级中(对于 Firefox)并且它会起作用。
关于html - 在 firefox 或 ie10 中将转换应用于 img 时透视不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19133207/