Issue with horizontal CSS transformation (transformation being multiplied?)

Question

For some reason the X-axis transformations at http://aarzee.me/mathexperimentanim.html (click on the gray square to trigger the transformation) are visually off from what I expect. The transformations should be identical to what is seen at http://aarzee.me/mathexperiment.html. I have verified that the math is sound (I'm not accidentally multiplying the X-axis translation anywhere in my code), and I am not sure what is triggering this behavior. My goal is to have the animation create the same result as the non-animated page.

Answer 1

The order in the transforms is important

you should do, for the 5th element

transform: translate(39.1897661172206px,-568.1997180915225px) rotate(0.13772551546391754rad);

and you are doing

transform:  rotate(0.13772551546391754rad) translate(39.1897661172206px,-568.1997180915225px);

The way that you are applying the transform, the rotation moves the element, besides rotating it, because it is not in the center of the transform.

Answer 2

Rather than calculating the translates for each tile, how about giving all the tiles a really large transform-origin so you only need to specify a different rotate value per tile.

    function expand() {
        var first = document.getElementById('first');
        first.style.transform = first.style.webkitTransform = 'rotate(2deg)';
        var second = document.getElementById('second');
        second.style.transform = second.style.webkitTransform = 'rotate(4deg)';
        var third = document.getElementById('third');
        third.style.transform = third.style.webkitTransform = 'rotate(6deg)';
        var fourth = document.getElementById('fourth');
        fourth.style.transform = fourth.style.webkitTransform = 'rotate(8deg)';
        var fifth = document.getElementById('fifth');
        fifth.style.transform = fifth.style.webkitTransform = 'rotate(10deg)';
    }

html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border: 0;
        }

        #bottom {
            width: 100%;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            -ms-flex-direction: row;
            flex-direction: row;
            align-items: flex-end;
        }

        #container {
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            margin: 24px;
        }

        .icon {
            width: 76px;
            height: 76px;
            margin-top: -76px;
            border-radius: 12.5%;
            position: absolute;
            -webkit-transition: -webkit-transform .5s ease;
            -moz-transition: -moz-transform .5s ease;
            -o-transition: transform .5s ease;
            transition: transform .5s ease;
        }

        #base {
            background: gray;
            z-index: 5;
        }

        #first {
            background: #000;
            z-index: 4;
            -moz-transform-origin: 4500% 50%;
            -ms-transform-origin: 4500% 50%;
            -o-transform-origin: 4500% 50%;
            -webkit-transform-origin: 4500% 50%;
            transform-origin: 4500% 50%;
            -moz-transform: rotate(2deg);
            -ms-transform: rotate(2deg);
            -o-transform: rotate(2deg);
            -webkit-transform: rotate(2deg);
            transform: rotate(0);
        }

        #second {
            background: red;
            z-index: 3;
            -moz-transform-origin: 4500% 50%;
            -ms-transform-origin: 4500% 50%;
            -o-transform-origin: 4500% 50%;
            -webkit-transform-origin: 4500% 50%;
            transform-origin: 4500% 50%;
            -moz-transform: rotate(2deg);
            -ms-transform: rotate(2deg);
            -o-transform: rotate(2deg);
            -webkit-transform: rotate(2deg);
            transform: rotate(0);
        }

        #third {
            background: #00f;
            z-index: 2;
            -moz-transform-origin: 4500% 50%;
            -ms-transform-origin: 4500% 50%;
            -o-transform-origin: 4500% 50%;
            -webkit-transform-origin: 4500% 50%;
            transform-origin: 4500% 50%;
            -moz-transform: rotate(2deg);
            -ms-transform: rotate(2deg);
            -o-transform: rotate(2deg);
            -webkit-transform: rotate(2deg);
            transform: rotate(0);
        }

        #fourth {
            background: #ff0;
            z-index: 1;
            -moz-transform-origin: 4500% 50%;
            -ms-transform-origin: 4500% 50%;
            -o-transform-origin: 4500% 50%;
            -webkit-transform-origin: 4500% 50%;
            transform-origin: 4500% 50%;
            -moz-transform: rotate(2deg);
            -ms-transform: rotate(2deg);
            -o-transform: rotate(2deg);
            -webkit-transform: rotate(2deg);
            transform: rotate(0);
        }

        #fifth {
            background: purple;
            z-index: 0;
            -moz-transform-origin: 4500% 50%;
            -ms-transform-origin: 4500% 50%;
            -o-transform-origin: 4500% 50%;
            -webkit-transform-origin: 4500% 50%;
            transform-origin: 4500% 50%;
            -moz-transform: rotate(2deg);
            -ms-transform: rotate(2deg);
            -o-transform: rotate(2deg);
            -webkit-transform: rotate(2deg);
            transform: rotate(0);
        }

<div id="bottom">
  <div id="container">
    <div class="icon" id="base" onclick="expand()"></div>
    <div class="icon" id="first"></div>
    <div class="icon" id="second"></div>
    <div class="icon" id="third"></div>
    <div class="icon" id="fourth"></div>
    <div class="icon" id="fifth"></div>
  </div>
</div>