由于，HTML内坐标系是从左往右是X轴，从上到下是Y轴。你的第三条边，实际上是从红点开始延长的一个长方形：

由于，第三条边是从正方形p3延长而来，而由于你增加了正方形的宽度，又因为屏幕从左向右为X轴正方向，所以宽度增加正方形会向右延长成长方形。而如果你要让这个变长的效果“看起来”是在向左移动，那么就要在每一次变长的同时，将红点向左移动相同的距离。

所以，对于p3的操作应该这样写：

if (y == "200") {
    var z = parseInt(p3.style.width);

    if (z < 200) {
        z++;
    }
    p3.style.marginLeft = (-z + 30) + 'px';
    // 加上上面一句，至于为什么是-z + 30
    // 其实是-(z - 30)
    // 因为，原本方块的宽度就是30，
    // 那么，在X轴正方向（宽度增量就是z - 30）
    // 由于宽度向右伸长了z - 30
    // 所以将左边距设置为-(z - 30)，来抵消这个向右伸长的增量
    // 所以，看起来就是在向左移动
    // 实际上是伸长以后将整个图形同时向左移相应的距离
    // 而并非是实际向左伸长
    p3.style.width = z + "px";
}

效果图：

由于，HTML内坐标系是从左往右是X轴，从上到下是Y轴。你的第三条边，实际上是从红点开始延长的一个长方形：

由于，第三条边是从正方形p3延长而来，而由于你增加了正方形的宽度，又因为屏幕从左向右为X轴正方向，所以宽度增加正方形会向右延长成长方形。而如果你要让这个变长的效果“看起来”是在向左移动，那么就要在每一次变长的同时，将红点向左移动相同的距离。

所以，对于p3的操作应该这样写：

if (y == "200") {

var z = parseInt(p3.style.width);

if (z < 200) {
    z++;
}
p3.style.marginLeft = (-z + 30) + 'px';
// 加上上面一句，至于为什么是-z + 30
// 其实是-(z - 30)
// 因为，原本方块的宽度就是30，
// 那么，在X轴正方向（宽度增量就是z - 30）
// 由于宽度向右伸长了z - 30
// 所以将左边距设置为-(z - 30)，来抵消这个向右伸长的增量
// 所以，看起来就是在向左移动
// 实际上是伸长以后将整个图形同时向左移相应的距离
// 而并非是实际向左伸长
p3.style.width = z + "px";

}
效果图：