Css 三维变换IE10_Css_Internet Explorer_Transform

Css 三维变换IE10

css internet-explorer

Css 三维变换IE10,css,internet-explorer,transform,Css,Internet Explorer,Transform,我已经启动了一个3D旋转图像转盘，它在Chrome和Firefox中运行良好，但在IE中不起作用我知道IE10+还不支持preserve-3d标签，但是有一个解决方案，可以将变换放在孩子身上，但我无法让它工作。任何想法和帮助都将受到欢迎请注意，-ms-前缀已被弃用，它应该只在发布预览中使用，从最终的IE10开始，支持未固定的属性，这将覆盖带前缀的属性也就是说，您必须更改各个面的位置，而不是旋转容器我发现最简单的方法是将面变换原点移到中心，这样你只需旋转面即可运行动画下面是一个基于您

我已经启动了一个3D旋转图像转盘，它在Chrome和Firefox中运行良好，但在IE中不起作用

我知道IE10+还不支持preserve-3d标签，但是有一个解决方案，可以将变换放在孩子身上，但我无法让它工作。任何想法和帮助都将受到欢迎

请注意，

-ms-

前缀已被弃用，它应该只在发布预览中使用，从最终的IE10开始，支持未固定的属性，这将覆盖带前缀的属性

也就是说，您必须更改各个面的位置，而不是旋转容器

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

下面是一个基于您的代码的简单示例：

<!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>


#旋转木马{
显示：块；
利润率：100px自动20px自动；
}
#纺纱机{
位置：相对位置；
保证金：0自动；
高度：350px；
宽度：500px；
}
#旋转木马面{
位置：绝对位置；
高度：350px；
宽度：500px；
变换原点：50%50%-250px；
过渡：所有1.0都易于输入输出；
}
#旋转木马{
宽度：500px；
盒影：0 1px#000；
}
#微调器{
变换：透视（1000px）旋转（0deg）平移（95px）；
}
#旋转器f1{
变换：透视（1000像素）旋转（72度）平移（95像素）；
}
#旋转器f2{
变换：透视（1000像素）旋转（144度）平移（95像素）；
}
#旋转器{
变换：透视（1000px）旋转（216度）平移（95px）；
}
#旋转器{
变换：透视（1000px）旋转（288deg）平移（95px）；
}
变量元素=$（'.face'）；
var旋转=[0,72,144,216,288]；
功能旋转（度）
{
元素。每个（函数（索引）
{
旋转[索引]=旋转[索引]+度；
$（this.css（'transform'、'perspective（1000px）rotateY（'+rotates[index]+'deg）translateZ（95px）'）；
});
}

另请参见，了解有关透视原点的更多信息和进一步的示例

<!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>