Question

Locked

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

By 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?

This conversation is currently closed to new comments.

5 total posts (Page 1 of 1)  
| Thread display: Collapse - | Expand +

All Answers

Collapse -

Trying to look like a CSS expert while using Google I wrote:

by robo_dev In reply to What's the trick to makin ...

.rotate { display: inline-block; }

or

.rotate { display: block; }

http://stackoverflow.com/questions/10644204/transform-rotate-works-in-firefox-but-not-chrome

Collapse -

Reponse To Answer

by Slayer_ In reply to Trying to look like a CSS ...

Yeah I read a bunch of those. I'll try again

Collapse -

Reponse To Answer

by Slayer_ In reply to Trying to look like a CSS ...

Yep, setting my #pic ID to display: block fixed it

thanks.

Collapse -

Try rotator components to make impressive rotate effects.

by xiaoyuandlg In reply to What's the trick to makin ...

Can't understand well with the HTML5 code for I am ignorant in this field. However, if you want to create good rotate effect in your webpage, I heard that a rotator control will be helpful. I remembered that I've seen this from a good site with vivid example. But, feel sorry that I can't find the original one. Yes, the rotator components is something like this one:

http://www.kettic.com/winforms_ui/rotator.shtml

Back to Browser Forum
5 total posts (Page 1 of 1)  

Related Discussions

Related Forums