The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #151872

    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


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

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.