0

I have tried using Animate element transform rotate but failure in IE 6, 7, 8!

This is my code:

$('.button').click(function(){
    $('.hexagon').animate({
        borderSpacing: 150
    },{
        step:function(now,fx){
            var costheta = Math.cos(now*Math.PI*2/360),
                sintheta = Math.sin(Math.PI*2/360),
                m11 = costheta,
                m12 = -sintheta,
                m21 = sintheta,
                m22 = costheta,
                matrix = 'M11='+m11+',M12='+m12+',M21='+m21+',M22='+m22;
            $(this)
            .css('transform','rotateY('+now+'deg)')
            .css('transform-origin','100% 50%')
            .css('filter','progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrix+')')
            .css('-ms-filter','progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrix+')');
        }
    },'linear');
});

http://jsfiddle.net/UserNaN/j7sDa/

Please help me!

Community
  • 1
  • 1
UserNaN
  • 137
  • 2
  • 13

1 Answers1

0

IE8 and older have no support for CSS transforms.IE9 uses -ms-transform, and IE10 and never use plain transform.

See the Link

Sudharsan S
  • 15,336
  • 3
  • 31
  • 49
  • Let's assume that is why the OP added filters to the animation as well. – adeneo Mar 27 '14 at 06:19
  • I see [jquery.transform.js](https://github.com/louisremi/jquery.transform.js) has good problem solving, but not support rotateY and transform-origin... But any other solution? – UserNaN Mar 27 '14 at 07:00