Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

IE8 issue - elements animate with wrong transform-origin

IE8 issue - elements animate with wrong transform-origin

Problem

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/

Problem courtesy of: user1231561

Solution

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.

Solution courtesy of: lifetimes

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

IE8 issue - elements animate with wrong transform-origin

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×