3D转换IE10

Question

我已经启动了3D旋转图像轮播，该轮播可以在Chrome和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>

另请参阅如何通过变换子元素来重新创建透视图效果？ 有关透视原点和其他示例的更多信息。

3D转换IE10

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-08-17 16:20:19

3D转换IE10

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-08-17 16:20:19

解决方案1
1 已采纳 2014-08-17 16:20:19