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

[gautam5154]

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 codepen

[Designer42]

Have you tried for MOZ. ‘-moz-transform: skewx(XXpx)’, Perspective should work. IE10 is not working because you don’t have anything for -MS.

Here try this. I took your Codepen code and did some changes. Look at putting all the transform properties on your image, not the wrapping div. Keep messing with the numbers until you get the desired effect.

Tested on Firefox, Chrome and IE9

    body {
        width: 960px;
        margin: 100px auto;
     }
    .slider {
        position: relative;
     }
     .sliced {
        position: absolute;
     }
    .sliced img{
transform: perspective(500px) rotateX(73deg) rotateZ(0deg) skewX(-30deg); 
     -webkit-transform: perspective(500px) rotateX(73deg) rotateZ(0deg) skewX(-30deg); 
 }

[gautam5154]

Thanks, for reply. But my question was why firefox doesn’t renders properly?
Take a look at screen shot

[Author]

Posts