CSS 3D对象不绕真实轴旋转

正如你在下面看到的，数字和记号并没有旋转到它们表面上所附着的红色圆圈的轴线上。为什么呢

看起来在蜱虫开始旋转的位置和圆的实际中心之间有某种无形的填充物，导致它们在旋转的同时旋转

var x=true；
$（文档）。在（“单击”，函数（）上）{
如果（x）$（“#pomodoro”）.css（“变换”、“旋转（85度）旋转（540度）”；
else$（“#pomodoro”）.css（“变换”，“旋转（85度）旋转（180度）”；
x=！x；
}); // 用于快速查看问题

@导入url（“https://fonts.googleapis.com/css?family=Roboto+单声道）；
html，正文{
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
背景色：#bbddff；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
字体系列：“Roboto Mono”，monospace；
字体大小：16px；
身高：100%；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
保证金：0；
填充：0；
宽度：100%；
}
.标记脸{
-webkit背面可见性：隐藏；
背面可见性：隐藏；
保证金：0；
填充：0；
-webkit变换：rotateX（-90度）rotateY（180度）；
变换：rotateX（-90度）rotateY（180度）；
-webkit转换原点：底部；
变换原点：底部；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
}
.时间标记{
高度：250px；
左：计算（50%-1ex）；
保证金：0；
填充：0；
填充底部：16px；
位置：绝对位置；
文本对齐：居中；
顶部：calc（50vh-266px）；
-webkit变换原点：中心；
变换原点：中心；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
宽度：19.2px；
}
#波莫多罗{
背景色：#ff9999；
边界半径：50%；
高度：500px；
保证金：0；
填充：0；
位置：绝对位置；
-webkit变换：rotateX（85度）rotateZ（180度）；
变换：rotateX（85度）rotateZ（180度）；
-webkit变换原点：中心；
变换原点：中心；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
-webkit转换：-webkit转换6s线性0s；
转换：-webkit转换6s线性0s；
变换：变换6s线性0s；
转换：转换6s线性0s，-webkit转换6s线性0s；
宽度：500px；
}
#pomodoro容器{
背景色：透明；
高度：500px；
保证金：0；
填充：0；
位置：绝对位置；
-webkit变换原点：中心；
变换原点：中心；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
宽度：500px；
}
#滴答声1{
-webkit变换：旋转（6度）；
变换：旋转（6度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声2{
-webkit变换：旋转（12度）；
变换：旋转（12度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声3{
-webkit变换：旋转（18度）；
变换：旋转（18度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声{
-webkit变换：旋转（24度）；
变换：旋转（24度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声{
-webkit变换：旋转（30度）；
变换：旋转（30度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声{
-webkit变换：旋转（36度）；
变换：旋转（36度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声{
-webkit变换：旋转（42度）；
变换：旋转（42度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声8{
-webkit变换：旋转（48度）；
变换：旋转（48度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声{
-webkit变换：旋转（54度）；
变换：旋转（54度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声{
-webkit变换：旋转（60度）；
变换：旋转（60度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声{
-webkit变换：旋转（66度）；
变换：旋转（66度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声{
-webkit变换：旋转（72度）；
变换：旋转（72度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声13{
-webkit变换：旋转（78度）；
变换：旋转（78度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声{
-webkit变换：旋转（84度）；
变换：旋转（84度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声{
-webkit变换：旋转（90度）；
变换：旋转（90度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声16{
-webkit变换：旋转（96度）；
变换：旋转（96度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声{
-webkit变换：旋转（102度）；
变换：旋转（102度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声18{
-webkit变换：旋转（108度）；
变换：旋转（108度）；
-webkit变换原点：底部中心；
变换原点：底部中心；
}
#滴答声{
-webkit变换：旋转（114度）；
变换：旋转（114度）；
-webkit转换源：
left: calc(50% - 9.6px);

top: calc(50% - 266px);

top: calc(50vh - 266px);

top: calc(50% - 266px);