1

When I apply transform to image, it transforms but in 2d way. perspective doesn't seems to work. However its perfect in opera/chrome. When I apply to div of image, perspective works perfectly. Here's my code:-

<!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);
}

If I change it to

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

It works prefectly. Any reasons or i am missing something? Here is my code pen

4

2 回答 2

2

In Firefox, perspective has to be applied in the parent where you apply the transform. (i don't know exactly why).

So, with an HTML where the relationship is slider > sliced > img your CSS doesn't work (slider is not the parent of the img). It will work if you rotate the sliced, as you say.

Another posibility to make it work is to set

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

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

This way, perspective is in the parent of the image (for firefox) and it will work.

于 2013-10-06T20:40:02.587 回答
0

You have added transformation for webkit and mozilla and havent declared anything for others. Try this one and it works fine:

    .sliced img{
        -webkit-transform : rotateX(80deg);
        -moz-transform : rotateX(80deg);
         transform: rotate(80deg);
    }
于 2013-10-02T09:28:58.627 回答