Tweenmax旋转在IE8中不起作用

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 Transforms，因此IE8不支持transform-origin。仅支持IE9及以上版本。

请参见:

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

http://caniuse.com/搜索=变换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中访问这些过滤器，所以你不必自己做数学或转换，但是transform-origin在IE8及以下版本中不支持