Question

我已经开始使用3D旋转图像旋转木马，它可以在Chrome＆amp; Firefox但不是IE。

我知道IE10 +还不支持 preserve-3d 标记，但是有一种解决方法是将变换放在子项上，但我无法使其工作。任何想法和帮助都将受到欢迎。

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

Answer 1

请注意，-ms-前缀已被弃用，它应该只在发布预览中使用，因为最终的IE10支持未加前缀的属性，这将覆盖前缀的那些！

话虽这么说，你将不得不改变各个面的位置，而不是旋转容器。

我发现最简单的方法是将脸部变换原点移动到中心，这样你只需旋转脸部就可以让动画运行。

以下是基于您的代码的裸体示例： 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>

另请参阅 How to recreate perspective-origin effect by transforming child elements? ，了解有关透视原点和更多示例的更多信息。

3d变换IE10

1 个答案: