html - Float, transformations in css

Question

Please see this Fiddle - http://jsfiddle.net/joshnh/73g7t/
I am not clear about some of the things in it.

1. DIV is a block level element(so it starts and ends with a line break). Then why are the divs placed side by side? Does float remove the line breaks of block level elements?
2. In the definition of .wrapper div, the code for rotate - transform: rotate(15deg); is already present. Then why is there another transform: rotate in .wrapper .translate BUT not in.wrapper .transform-origin

Answer 1

1. The CSS spec explains why this is. It's not a line-break, but the block formatting context is restarted for floats.
2. .wrapper .translate overwrites the transform rules. If it does not specify rotate, the rotation would not occur: http://jsfiddle.net/73g7t/304/ -- transform-origin is a separate rule.