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

由于某种原因，X轴变换（点击灰色方块触发变换）在视觉上与我预期的不同。转换应该与在上看到的相同。我已经验证了数学是正确的（我没有在代码中的任何地方意外地将X轴平移相乘），并且我不确定是什么触发了这种行为。我的目标是让动画创建与非动画页面相同的结果。

与其计算每个平铺的平移，不如为所有平铺指定一个非常大的

变换原点

，这样您只需要为每个平铺指定一个不同的

旋转

值

函数展开（）{
var first=document.getElementById（'first'）；
first.style.transform=first.style.webkitttransform='rotate（2deg）'；
var second=document.getElementById（'second'）；
second.style.transform=second.style.webkitttransform='rotate（4deg）'；
var third=document.getElementById（'third'）；
third.style.transform=third.style.webkitttransform='rotate（6deg）'；
var fourth=document.getElementById（'fourth'）；
fourth.style.transform=fourth.style.webkitttransform='rotate（8deg）'；
var fifth=document.getElementById（'fifth'）；
fifth.style.transform=fifth.style.webkitttransform='旋转（10度）'；
}

html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
边界：0；
}
#底部{
宽度：100%；
身高：100%；
显示器：flex；
显示：-webkit flex；
-ms柔性方向：行；
弯曲方向：行；
对齐项目：柔性端；
}
#容器{
-ms-flex:01自动；
flex:01自动；
利润率：24px；
}
.图标{
宽度：76px；
高度：76px；
利润上限：-76px；
边界半径：12.5%；
位置：绝对位置；
-webkit转换：-webkit转换。5s轻松；
-moz转换：-moz转换。5s易用性；
-o-过渡：转变。5s轻松；
转型：转型。5s轻松；
}
#基地{
背景：灰色；
z指数：5；
}
#首先{
背景：#000；
z指数：4；
-moz变换原点：4500%50%；
-ms转换来源：4500%50%；
-o-转换起源：4500%50%；
-webkit转换来源：4500%50%；
转换原点：4500%50%；
-moz变换：旋转（2deg）；
-ms变换：旋转（2deg）；
-o变换：旋转（2deg）；
-webkit变换：旋转（2deg）；
变换：旋转（0）；
}
#第二{
背景：红色；
z指数：3；
-moz变换原点：4500%50%；
-ms转换来源：4500%50%；
-o-转换起源：4500%50%；
-webkit转换来源：4500%50%；
转换原点：4500%50%；
-moz变换：旋转（2deg）；
-ms变换：旋转（2deg）；
-o变换：旋转（2deg）；
-webkit变换：旋转（2deg）；
变换：旋转（0）；
}
#第三{
背景：#00f；
z指数：2；
-moz变换原点：4500%50%；
-ms转换来源：4500%50%；
-o-转换起源：4500%50%；
-webkit转换来源：4500%50%；
转换原点：4500%50%；
-moz变换：旋转（2deg）；
-ms变换：旋转（2deg）；
-o变换：旋转（2deg）；
-webkit变换：旋转（2deg）；
变换：旋转（0）；
}
#第四{
背景：#ff0；
z指数：1；
-moz变换原点：4500%50%；
-ms转换来源：4500%50%；
-o-转换起源：4500%50%；
-webkit转换来源：4500%50%；
转换原点：4500%50%；
-moz变换：旋转（2deg）；
-ms变换：旋转（2deg）；
-o变换：旋转（2deg）；
-webkit变换：旋转（2deg）；
变换：旋转（0）；
}
#第五{
背景：紫色；
z指数：0；
-moz变换原点：4500%50%；
-ms转换来源：4500%50%；
-o-转换起源：4500%50%；
-webkit转换来源：4500%50%；
转换原点：4500%50%；
-moz变换：旋转（2deg）；
-ms变换：旋转（2deg）；
-o变换：旋转（2deg）；
-webkit变换：旋转（2deg）；
变换：旋转（0）；
}

---

变换的顺序很重要

你应该这样做，对于第五个元素

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

你在做什么

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

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