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

CSS3 Transform Perspective Not Working in FF or IE - Swing Effect

CSS3 Transform Perspective Not Working in FF or IE - Swing Effect

Problem

I'm relatively new to CSS3 transform and keyframe animations so tend to stick to CSS generators or ripping other examples. I have modified the example shown here for my own purposes which works great in Chrome but not in FF or IE - http://webbb.be/blog/making-a-swinging-effect-with-css3-animations/.

See my example below (js fiddle included), in essence this is a swing effect on hover using perspective but the perspective doesn't seem to work in FF and IE.. I have only added the -moz- pre fix to the example below... any ideas?

a  {  display: block;
float:left;
text-indent: -999px;
overflow: hidden;
height: 100px;
width: 100px;
background: red;
cursor: pointer;

}

.perspective { 
position: relative; 
-webkit-perspective: 350;
-moz-perspective: 350;
width: 100px;
height: 100px;
}

.perspective .swing {
position: relative; 
z-index:1;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
}

a.swing:hover {
-webkit-transform-origin: top;
-moz-transform-origin: top;
-webkit-animation: balance 1.5s ease-in-out 110ms 1 alternate;
-moz-animation: balance 1.5s ease-in-out 110ms 1 alternate;
}


@-webkit-keyframes balance { 
25% { -webkit-transform: rotateX(-60deg); }  
45% { -webkit-transform: rotateX(50deg); } 
69% { -webkit-transform: rotateX(-30deg); } 
90% { -webkit-transform: rotateX(30deg); } 
100% { -webkit-transform: rotateX(0deg);} 
}


@-moz-keyframes balance { 
25% { -moz-transform: rotateX(-60deg); }  
45% { -moz-transform: rotateX(50deg); } 
69% { -moz-transform: rotateX(-30deg); } 
90% { -moz-transform: rotateX(30deg); } 
100% { -moz-transform: rotateX(0deg);} 
}

http://jsfiddle.net/7ejF7/1/

Problem courtesy of: Andy

Solution

You need to add px values for perspective to work on non-webkit browsers.

-moz-perspective: 350px;

http://jsfiddle.net/mZMGd/

Solution courtesy of: daviestar

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

CSS3 Transform Perspective Not Working in FF or IE - Swing Effect

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×