<!DOCTYPE html> <html> <head> <title>Nested transform tests</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../../test.js"></script> <style> #first { background: indianred; margin-top: 100px; } #second { border: 10px solid red; background: darkseagreen; -webkit-transform: translate(125px); /* Chrome, Safari 3.1+ */ -moz-transform: translate(125px); /* Firefox 3.5-15 */ -ms-transform: translate(125px); /* IE 9 */ -o-transform: translate(125px); /* Opera 10.50-12.00 */ transform: translate(125px); } #third { background: cadetblue; -webkit-transform: translate(-100px, -25px); /* Chrome, Safari 3.1+ */ -moz-transform: translate(100px, -25px); /* Firefox 3.5-15 */ -ms-transform: translate(100px, -25px); /* IE 9 */ -o-transform: translate(100px, -25px); /* Opera 10.50-12.00 */ transform: translate(100px, -25px); -webkit-transform-origin: 100px 50px; -moz-transform-origin: 100px 50px; -ms-transform-origin: 100px 50px; -o-transform-origin: 100px 50px; transform-origin: 100px 50px; } div { display: inline-block; padding: 10px; } body { font-family: Arial; } </style> </head> <body> <div id="first">First level content <div id="second">with second level content <div id="third">and third level content</div>, ending second</div>, ending first</div> </body> </html>