css - 水平 CSS 转换问题(转换成倍增加？)

Question

由于某种原因，http://aarzee.me/mathexperimentanim.html 处的 X 轴变换(单击灰色方 block 以触发转换)在视觉上与我的预期不符。转换应该与在 http://aarzee.me/mathexperiment.html 中看到的相同.我已经验证数学是合理的(我不是在我的代码中的任何地方不小心乘以 X 轴平移)，但我不确定是什么触发了这种行为。我的目标是让动画创建与非动画页面相同的结果。

Answer 1

与其计算每个图 block 的平移，不如给所有图 block 一个非常大的 transform-origin 这样您只需要为每个图 block 指定一个不同的 rotate 值.

    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>