3d 变换 IE10答案

【问题标题】：3d transform IE103d 变换 IE10
【发布时间】：2014-08-17 13:01:54
【问题描述】：

我已经启动了一个 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);
}

【问题讨论】：

标签： css internet-explorer transform

【解决方案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?，了解有关透视起源的更多信息和进一步的示例。

【讨论】：