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