Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS - Beyond the Basics Understanding CSS Transitions and Transforms 3D Transforms: perspective and rotate3d

Omarwali Jones
Omarwali Jones
8,251 Points
Posted by Omarwali Jones
Omarwali Jones
8,251 Points

3D Transforms: Infinite rotation.... how? (Can an experienced CSS expert chime in)

Ok par this video I finally got some insight into a technique I had in the back of my mind for a while. Now I can put in on the page... so exciting. Anyway par the lesson you have your images inside a div with a class... lets say "wrap" just like the lesson. You throw this in the CSS

.wrap:hover { -webkit-transform: rotateY(360deg); }

and presto it spins around once. Or twice (720deg) depending on the value you specify. How can I get it to spin infinitely? I have an Octahedron I'd like to apply this effect to ;)

Thanks

1 Answer

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Omarwali;

It sounds like you are bordering on, or are wanting more animation than basic rotation. At any rate, take a look at this tutorial and see if that is close to what you are looking to do.

Post back if not and we can move on to a different approach if necessary.

Happy coding,
Ken