Question

我试图使用Tweenmax逆时针旋转两个图像，在mozilla，chrome和ie9也工作。但是ie8旋转是不同的。图像向左移动而没有旋转。如何解决它。我想支持ie8也

<script>
 TweenMax.to(".pole1", 2, {
        top: '83px',
        left: '53px',
        rotation:-23,
        transformOrigin: "bottom center",

    });
   TweenMax.to(".pole2", 2, {
        top: '-27px',
        left: '38px',
        rotation: -40,
        transformOrigin: "bottom center",

    });

</script>

Answer 1

IE8不支持CSS3 2D或3D转换，因此IE8不支持transform-origin。仅限IE9及以上版本。

请参阅：

http://msdn.microsoft.com/en-us/library/ie/jj127313%28v=vs.85%29.aspx

http://caniuse.com/#search=transform

http://msdn.microsoft.com/en-us/library/ie/jj127312%28v=vs.85%29.aspx

GreenSock GSAP TweenMax仍然可以旋转你的元素。 GSAP与处理轮换的IE提供的过滤器一起使用。如下：

/* IE6,IE7 */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
/* IE8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";

您可以使用以下转换器来获取旋转矩阵。

IETransformsTranslator

但是GSAP甚至可以在IE6中访问这些过滤器，因此您不必自己进行数学或转换，但IE8及以下版本不支持transform-origin。

在IE8中Tweenmax旋转不起作用

1 个答案: