CODEWITHSUNDEEP
cssinternet-explorertransform
Gavin
Gavin

Reputation: 3

3d transform IE10

I have started a 3D rotating image carousel which works fine in Chrome & Firefox but not IE.

I know that IE10+ doesn't yet support the preserve-3d tag but there is meant to be a workaround of putting the transforms on the children, but I can't get it to work. Any ideas and help will be most welcome.

http://codepen.io/gnm67/pen/izyjs

    #Carousel {
  display: block;
  margin:100px auto 20px auto;

  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;

  -webkit-perspective-origin: 50% 100px;
  -moz-perspective-origin: 50% 100px;
  -ms-perspective-origin: 50% 100px;
  perspective-origin: 50% 100px;
}

#Spinner {
  position: relative;
  margin: 0 auto;
  height: 350px;
  width: 500px;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-transform-origin: 50% 400px 0px;
  -moz-transform-origin: 50% 400px 0px;
  -ms-transform-origin: 50% 400px 0px;
  transform-origin: 50% 400px 0px;

  -webkit-transition:all 1.0s ease-in-out;
  -moz-transition:all 1.0s ease-in-out;
  -ms-transition:all 1.0s ease-in-out;
  transition:all 1.0s ease-in-out;

  -ms-perspective: 1000px;
 }



#Carousel .face {
  position: absolute;
  height: 350px;
  width: 500px;
  padding: 0px;
}
#Carousel img {
  width:500px;
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
}

#Spinner .f0 {
  -webkit-transform: rotateY(0deg) translateZ(344px);
  -moz-transform: rotateY(0deg) translateZ(344px);
  -ms-transform: perspective(1000px) rotateY(0deg) translateZ(344px);
  transform: rotateY(0deg) translateZ(344px);
}
#Spinner .f1 {
  -webkit-transform: rotateY(72deg) translateZ(344px);
  -moz-transform: rotateY(72deg) translateZ(344px);
  -ms-transform: perspective(1000px) rotateY(72deg) translateZ(344px);
  transform: rotateY(72deg) translateZ(344px);
}
#Spinner .f2 {
  -webkit-transform: rotateY(144deg) translateZ(344px);
  -moz-transform: rotateY(144deg) translateZ(344px);
  -ms-transform: perspective(1000px) rotateY(144deg) translateZ(344px);
  transform: rotateY(144deg) translateZ(344px);
}
#Spinner .f3 {
  -webkit-transform: rotateY(216deg) translateZ(344px);
  -moz-transform: rotateY(216deg) translateZ(344px);
  -ms-transform: perspective(1000px) rotateY(216deg) translateZ(344px);
  transform: rotateY(216deg) translateZ(344px);
}
#Spinner .f4 {
  -webkit-transform: rotateY(288deg) translateZ(344px);
  -moz-transform: rotateY(288deg) translateZ(344px);
  -ms-transform: perspective(1000px) rotateY(288deg) translateZ(344px);
  transform: rotateY(288deg) translateZ(344px);
}

Upvotes: 0

Views: 567

Answers (1)

ndm
ndm

Reputation: 60463

Note that the -ms- prefix is deprecated, it was supposed to be used only in the release preview, as of the final IE10 the unprefixed properties are supported, which will overwrite the prefixed ones!

That being said, you'll have to change the position of the individual faces instead of rotating the container.

I found the easiest is to shift the faces transform origin into the center, that way you only have to rotate the faces to get the animation running.

Here's a bare to the bones example based on your code: http://jsfiddle.net/k1m045uu/

<!DOCTYPE html>
<html>
    <head>
        <style type='text/css'>
        #Carousel {
            display: block;
            margin:100px auto 20px auto;
        }

        #Spinner {
            position: relative;
            margin: 0 auto;
            height: 350px;
            width: 500px;
        }

        #Carousel .face {
            position: absolute;
            height: 350px;
            width: 500px;
            transform-origin: 50% 50% -250px;
            transition: all 1.0s ease-in-out;
        }
        #Carousel img {
            width: 500px;
            box-shadow: 0 0 0 1px #000;
        }

        #Spinner .f0 {
            transform: perspective(1000px) rotateY(0deg) translateZ(95px);
        }
        #Spinner .f1 {
            transform: perspective(1000px) rotateY(72deg) translateZ(95px);
        }
        #Spinner .f2 {
            transform: perspective(1000px) rotateY(144deg) translateZ(95px);
        }
        #Spinner .f3 {
            transform: perspective(1000px) rotateY(216deg) translateZ(95px);
        }
        #Spinner .f4 {
            transform: perspective(1000px) rotateY(288deg) translateZ(95px);
        }
        </style>

        <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
    </head>
    <body>
        <div id="Carousel">
            <a href=# onclick="rotate(-72);">Previous</a>&nbsp;<a href=# onclick="rotate(+72);">Next</a>
            <div id="Spinner">
                <img class="face f0" src="img/test1.jpg" />
                <img class="face f1" src="img/test2.jpg" />
                <img class="face f2" src="img/test3.jpg" />
                <img class="face f3" src="img/test4.jpg" />
                <img class="face f4" src="img/test5.jpg" />
            </div>
        </div>

        <script>
        var elements = $('.face');
        var rotates = [0, 72, 144, 216, 288];

        function rotate(deg)
        {
            elements.each(function(index)
            {
                rotates[index] = rotates[index] + deg;
                $(this).css('transform', 'perspective(1000px) rotateY(' + rotates[index] + 'deg) translateZ(95px)');
            });
        }
        </script>
    </body>
</html>

See also How to recreate perspective-origin effect by transforming child elements? for some more info regarding perspective origin and a further example.

Upvotes: 1

Related Questions