CSS3 变换 rotateY(180deg) - IE 后备答案

【问题标题】：CSS3 transform rotateY(180deg) - IE fallbackCSS3 变换 rotateY(180deg) - IE 后备
【发布时间】：2014-02-25 22:59:25
【问题描述】：

transform rotateY(180deg) 是否有 IE 后备？需要一个 3D 翻转动画！

【问题讨论】：

标签： css css-transitions

【解决方案1】：

我没有 IE8 可以测试，但我认为这可能有效：(ie5.5+) 过滤器：progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx

IE 的矩阵过滤器可能是另一种选择： http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx

当我在玩其他东西时，我从这个网站得到了答案： http://snook.ca/archives/html_and_css/css-text-rotation

个人在使用 IE6-8 时，最适合我的标签是 display: none ;P

【讨论】：

这在 2d 平面中旋转。例如。它对应于transform: rotate(270deg) - 不是transform: rotateY(270deg)

【解决方案2】：

我知道这个问题很老了，但上周我遇到了同样的问题。你需要的是：

.flipHorizontal {
filter: "fliph";
}

更具体地说，如果你想在 y 轴上连续旋转它，我创建了一个 jquery 插件来使用：

**
 * jQuery Rotate On Axis In IE Plugin 1.0.0
 *
 * Copyright (c) 2014 Aryeh Citron
 *
 * Licensed under MIT: http://www.opensource.org/licenses/mit-license.php
 */


(function ($)
{
    $.fn.rotateOnAxisInIE = function (options)
    {
        var settings = $.extend(
        {
            spinSpeed: "slow",
        }, options);

        return this.each(function ()
        {
            var startingInterval;
            switch (settings.spinSpeed)
            {
                case "slow": startingInterval = 0.006; break;
                case "medium": startingInterval = 0.01; break;
                case "fast": startingInterval = 0.03; break;
                default: startingInterval = 0.01; break;
            }

            var image = this;
            var imageWidth = 1;
            var gettingSmaller = true;
            var fullRotation = true;
            var interval = startingInterval;
            var increment = startingInterval / 4;
            var refreshRateInMilliseconds = 35;

            setInterval(function ()
            {
                $(image).css("msTransform", "scaleX(" + imageWidth + ")");
                if (gettingSmaller)
                {
                    interval = interval + increment;
                    imageWidth = imageWidth - interval;
                }
                else
                {
                    interval = interval - increment;
                    imageWidth = imageWidth + interval;
                }

                if (imageWidth <= 0)
                {
                    gettingSmaller = false;
                    if ($(image).css("filter") == "")
                        $(image).css("filter", "fliph");
                    else
                        $(image).css("filter", "");

                    imageWidth = 0.01;
                }
                if (imageWidth >= 1)
                {
                    gettingSmaller = true;
                }

                if (gettingSmaller && interval < 0)
                    interval = 0;

            }, refreshRateInMilliseconds);
        });
    };
}(jQuery));

示例用法

$("#myImageId").rotateOnAxisInIE();

或

$("#myImageId").rotateOnAxisInIE({ spinSpeed: "fast" });

【讨论】：

【解决方案3】：

您需要使用过滤器

#rotate {
 -ms-transform:rotateY(180deg); //IE9
}

【讨论】：

谢谢，但这不是 X 轴上的 2D 旋转吗？ RotateY 向后翻转？
试过这个，但似乎在 IE9 中不起作用？有任何想法吗？ jsfiddle.net/lsatdown/j3RFk