CODEWITHSUNDEEP
htmlcss
Gautam Kumar
Gautam Kumar

Reputation: 727

Perspective not working when transformation applied to img in firefox or ie10?

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

Upvotes: 1

Views: 757

Answers (2)

vals
vals

Reputation: 64174

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.

Upvotes: 2

Kuzgun
Kuzgun

Reputation: 4737

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

Upvotes: 0

Related Questions