Questions

What's the trick to making rotate work in chrome?

+
0 Votes

What's the trick to making rotate work in chrome?

Slayer_
I'm stumped.

I am going through the html5 tutorials.

Everything works perfect in firefox, even without the vender specific -??- stuff in the CSS.
But Chrome seems to require those, and I can't get the rotate to work.

I managed to get scale, transform, and skew to work, but not rotate.

My code just has a figure that gets animated and rotate on hover.

}
@-webkit-keyframes dostuff{
0% {box-shadow: 0 0 50px 50px #ff0000; text-shadow:0 0; -webkit-transform: scale(2) translate(25%,60%) rotate(20deg) skew(-10deg,-10deg);}
25% {box-shadow: 0 0 0px 0px #ff0000; text-shadow:0 0; -webkit-transform: scale(1) translate(25%,60%) rotate(0deg) skew(0deg,0deg);}
50% {box-shadow: 0 0 50px 50px #ff0000; text-shadow:0 0; -webkit-transform: scale(2) translate(25%,60%) rotate(-20deg) skew(10deg,10deg);}
75% {box-shadow: 0 0 0px 0px #ff0000; text-shadow:0 0; -webkit-transform: scale(1) translate(25%,60%) rotate(0deg) skew(0deg,0deg);}
100% {box-shadow: 0 0 50px 50px #ff0000; text-shadow:0 0; -webkit-transform: scale(2) translate(25%,60%) rotate(20deg) skew(-10deg,-10deg);}
}
@keyframes dostuff{
0% {box-shadow: 0 0 50px 50px #ff0000; text-shadow:0 0; transform: scale(2) translate(25%,60%) rotate(20deg) skew(-10deg,-10deg);}
25% {box-shadow: 0 0 0px 0px #ff0000; text-shadow:0 0; transform: scale(1) translate(25%,60%) rotate(0deg) skew(0deg,0deg);}
50% {box-shadow: 0 0 50px 50px #ff0000; text-shadow:0 0; transform: scale(2) translate(25%,60%) rotate(-20deg) skew(10deg,10deg);}
75% {box-shadow: 0 0 0px 0px #ff0000; text-shadow:0 0; transform: scale(1) translate(25%,60%) rotate(0deg) skew(0deg,0deg);}
100% {box-shadow: 0 0 50px 50px #ff0000; text-shadow:0 0; transform: scale(2) translate(25%,60%) rotate(20deg) skew(-10deg,-10deg);}
}


And this
#pic:hover{
-webkit-transform: scale(2) rotate(360deg);
transform: scale(2) rotate(360deg);
}
In both cases the rotate is ignored.
Also, in the hover, chrome seems to make the scale stick, but firefox restores it back when you stop hovering.

What did I do wrong?

Member Answers