在保持位置的同时，将多个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黑客攻击？有没有一种简单的方法 - 我不知道从哪里开始。 O.o

＆＃13;

＆＃13;

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 );*/
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我有大量的动态转换，如下所示：

Answer 1

我不知道其他任何方式，但想出了这个＆＃34; hacky＆＃34;基于关键帧的方法

更新：删除了jQuery

＆＃13;

＆＃13;

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;
};

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;