translate vs transform-origin css3

css transform
Sasha picture Sasha · Dec 25, 2011 · Viewed 17.8k times · Source

I was wondering if someone could help me. I've been having trouble understanding what exactly is the css3 property: transform-origin. I can't seem to follow the direction it is moving.

So for example, lets say you have a square div, and you rotate it 40 degrees. and then you perform a transform-origin: 100% 0%. can't you just do a translateX(and some value)? It seems like translateX will move it along the x-axis with respect to the newly rotated axis after performing a rotate. I can't seem to follow what transform-origin is doing, or what exactly it even is.

A clear and thorough example would be much appreciated. =)

Answer

joshnh picture joshnh · Dec 25, 2011

transform-origin changes the point at which the element transforms rather than moving the entire element (as translate would). The default value is transform-origin: 50% 50%;.

Here is an illustration: http://jsfiddle.net/joshnh/73g7t/

Related questions

CSS3 Continuous Rotate Animation (Just like a loading sundial)

I am trying to replicate an Apple style activity indicator (sundial loading icon) by using a PNG and CSS3 animation. I have the image rotating and doing it continuously, but there seems to be a delay after the animation has …

Read More
Blurry text after using CSS transform: scale(); in Chrome

Seems like there has been a recent update to Google Chrome that causes blurry text after doing a transform: scale(). Specifically I'm doing this: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } If you visit http://…

Read More
Rotate and translate

I'm having some problems rotating and positioning a line of text. Now it's just position that works. The rotation also works, but only if i disable the positioning. CSS: #rotatedtext { transform-origin: left; transform: rotate(90deg); transform: translate(50%, 50%); } The html is …

Read More