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

williamrossi
williamrossi
6,232 Points
Posted by williamrossi
williamrossi
6,232 Points

Smooth transform

Hi guys. I have a upwards pointing arrow that I want to rotate down 180 degrees when the arrow is clicked. I am using SASS and Compass but I find their website pretty confusing for the transform syntax. (http://compass-style.org/reference/compass/css3/transform/)

http://jsfiddle.net/E88Jh/

This is not picking up my sass but you can see its pretty simple what I am trying to do.

I have managed to rotate this by 180 degrees but it does not turn around in a smooth transition. I also lose my padding upon transformation.

Any ideas? many thanks

1 Answer

Keiron Lowe
Keiron Lowe
2,993 Points
Keiron Lowe
Keiron Lowe
2,993 Points

I can't seem to see any arrow when looking at your link, but looking at your code it looks like your missing the transition property. Without the transition property, changes will happen instantly. If you add the following code it should work transition: transform .3s ease. (You may need to add some browser prefixes, -webkit-, -moz- etc).

The first value of the property tells it which property to transition, the second tell's it long the transition should take, so .3s is one third of a second, and the last value is the easing, which can be either linear, ease or a custom easing using cubic-bezier.