Please see this Fiddle - http://jsfiddle.net/joshnh/73g7t/
I am not clear about some of the things in it.[*]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?[*]In the definition of \[code\].wrapper div\[/code\], the code for rotate - \[code\]transform: rotate(15deg);\[/code\] is already present. Then why is there another \[code\]transform: rotate\[/code\] in \[code\].wrapper .translate\[/code\] BUT not in\[code\].wrapper .transform-origin\[/code\]
I am not clear about some of the things in it.[*]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?[*]In the definition of \[code\].wrapper div\[/code\], the code for rotate - \[code\]transform: rotate(15deg);\[/code\] is already present. Then why is there another \[code\]transform: rotate\[/code\] in \[code\].wrapper .translate\[/code\] BUT not in\[code\].wrapper .transform-origin\[/code\]