javascript - 在保持位置的同时将多个 CSS 转换减少为更少的转换

Question

我有一个包含大量 CSS 转换的元素，如下所示:

transform:  translateX( 0 )
            translateY( -1rem )
            rotate( 45deg ) 
            translateY( -2.5rem )
            rotate( 45deg )
            translateY( 5rem );

这些属性的顺序很重要，因为它们会影响元素最终在页面上的定位方式。我做了一些修补，并用更少的属性得到了完全相同的最终结果:

transform:  rotate( 90deg ) translateX( -2.8rem ) translateY( 3.25rem );

您可以通过注释和取消注释下面代码段中的注释来测试它，看没有任何变化(转换等于相同的结果)。

这是我手动完成的，我花了一些时间才找到能得到相同结果的确切转换。我正在尝试实时为数以千计的属性执行此操作...

有公式吗？有 CSS hack 吗？有没有一种简单的方法可以做到这一点——我不知道从哪里开始。哦

html {
  display: flex;
  height: 100%; 
  justify-content: center;
  align-items: center;
}

div {
  padding: 2.5rem 1rem;
  background-color: #4cc;
  color: #eee;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 0.25rem;
  
  transform:  translateX( 0 )
              translateY( -1rem )
              rotate( 45deg ) 
              translateY( -2.5rem )
              rotate( 45deg )
              translateY( 5rem );
  
/*transform:  rotate( 90deg ) translateX( -2.8rem ) translateY( 3.25rem );*/
}

<div>
  transformed<br>element
</div>

编辑:您可能想知道:为什么要这样做!？这是我之前遇到的问题:Move transform-origin back to the center of the element in CSS .我是这样解决的:Transforms are added...endlessly .但现在我有无穷无尽的变换，这就是我问的原因。

我有很多看起来像这样的动态转换:

Answer 1

我不知道还有什么其他方法，但想出了这个基于关键帧的“hacky”方法

更新:删除了 jQuery

var currentAngle = 0,
  styleElment = document.createElement('style'), // create a style element to insert dynamic keyframes
  styleSheet,
  animState = 0; // toggle between 2 animation states

document.head.appendChild(styleElment);
styleSheet = styleElment.sheet;

// insert 2 default keyframes to the created stylesheet
styleSheet.insertRule("@keyframes rotate_1 {0% {transform: rotate(0deg);} 100% {transform: rotate(0deg)}}"); // at index 1
styleSheet.insertRule("@keyframes rotate_2 {0% {transform: rotate(0deg);} 100% {transform: rotate(0deg)}}"); // at index 0

document.getElementById("rotateBtn").onclick = function() {
  var newAngle = currentAngle + 30,
    transformCSS = "rotate(" + newAngle + "deg)",
    keyframe_1 = "transform: rotate(" + currentAngle + "deg);",
    keyframe_2 = "transform: rotate(" + newAngle + "deg);",
    animationCSS;

  styleSheet.cssRules[animState][0].style.cssText = keyframe_1; // sets value at 0%
  styleSheet.cssRules[animState][1].style.cssText = keyframe_2; // sets value at 100%

  if (animState === 0) {
    animState = 1;
    animationCSS = "rotate_2 1s";
  } else {
    animState = 0;
    animationCSS = "rotate_1 1s";
  }

  document.getElementById("container").style.animation = animationCSS;
  document.getElementById("container").style.transform = transformCSS;

  currentAngle = newAngle;
};

#container {
  width: 50px;
  height: 50px;
  background: red;
}

<div id="container"></div>
<button id="rotateBtn">Rotate</button>