我已经启动了一个 3D 旋转图像轮播，它在 Chrome 和 Firefox 中运行良好，但在 IE 中运行良好。
我知道 IE10+ 尚不支持 preserve-3d 标签，但应该有一种解决方法，可以将变换应用于子项，但我无法让它工作。 我们非常欢迎任何想法和帮助。
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);
}
最佳答案
请注意，-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> <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? 有关透视起源和进一步示例的更多信息。
关于css - 3d 变换 IE10，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25349408/