Question

出于某种原因，http://aarzee.me/mathexperimentanim.html处的X轴变换（点击灰色方块以触发变换）在视觉上与我的预期不同。转换应与http://aarzee.me/mathexperiment.html处的转换相同。我已经确认数学是合理的（我不会在我的代码中的任何地方意外地将X轴平移相乘），而且我不确定是什么触发了这种行为。我的目标是让动画创建与非动画页面相同的结果。

Answer 1

不是计算每个图块的翻译，而是为所有图块提供非常大的transform-origin，所以您只需要为每个图块指定不同的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>

Answer 2

变换中的顺序很重要

你应该做的，为第5个元素

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

你正在做

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

您应用变换的方式是，旋转除了旋转元素外，还会移动元素，因为它不在变换的中心。

水平CSS转换的问题（转换成倍？）

2 个答案: