donkey,
Если я правильно понял, то (без анимации) должно получиться что-то вроде
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<style>
#x {z-index: -1; position: absolute; background-color: blue; right: 15; top:15; width: 185; height: 185; text-align: center}
#xx {z-index: -2; position: absolute; background-color: red; right: 0; top:10; width: 50; height: 200;}
#xxx {z-index: -3; position: absolute; background-color: yellow; right: -300; top:15; width: 500; height: 185; border: 1px solid black; text-align: right}
</style>
</head>
<body>
<div style="position: fixed; top: 25%; left: 25%; width: 400; Height:300; border: 1px solid #000000;">
[my screen]
<div id="x">That DIV must turn left wih (xxx)</div>
<div id="xx"></div>
<div id="xxx">That DIV must turn left onClick</div>
</div>
<a href="#">onClick</a>
<script>
var a = document.querySelector("a"),
x = document.getElementById("x"),
xxx = document.getElementById("xxx");
a.onclick = function() {
x.style.left = '0px';
xxx.style.left = getComputedStyle(x, "").getPropertyValue('width');
}
</script>
</body>
</html>