IE8 issue - elements animate with wrong transform-origin
I currently have one big main circle. From this Big Circle im doing some animation with some lines appearing from the center point of the big circle and then rotating around the big circle with soem different degress.
Im using prefixes like the following to define the transfer-origin:
transform-origin: center bottom; -moz-transform-origin: center bottom; /* Firefox */ -ms-transform-origin: center bottom; /* IE 9 */ -webkit-transform-origin: center bottom; /* Safari and Chrome */ -o-transform-origin: center bottom; /* Opera */
This works fine in all browsers except IE8 and downwards - tried a few different things to target and fix this in IE8, but no luck. Any suggestions.
Example Fiddle of the working animation here: http://jsfiddle.net/R5CDv/21/
It's not working in IE8 and below, because the
transform property is only supported from IE9+.
For IE8 and below, one solution which could be useful would be using filters - check out this tutorial on implementing transform-origin on older versions of IE using it.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here