Question

当我将变换应用于图像时，它会以2d方式进行变换。透视似乎不起作用。然而它完美的歌剧/铬。当我应用于图像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>

的style.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

Answer 1

在Firefox中，必须在应用转换的父级中应用透视。（我不确切知道为什么）。

所以，使用HTML，其中关系是滑块＆gt;切片＆gt; img你的CSS不起作用（滑块不是img的父级）。如你所说，旋转切片时它会起作用。

使其成功的另一个可能性是设置

.slider {
    -webkit-perspective : 600px;
    position: relative;

 }
 .sliced {
    -moz-perspective : 600px;
}

这样，透视图位于图像的父级（对于firefox），它将起作用。

Answer 2

您已为webkit和Mozilla添加了转换，并且没有为其他人声明任何内容。尝试这个，它工作正常：

    .sliced img{
        -webkit-transform : rotateX(80deg);
        -moz-transform : rotateX(80deg);
         transform: rotate(80deg);
    }

当转换应用于firefox或ie10中的img时，透视无法正常工作？

2 个答案: