Html 三维立方体沿菱形路径移动

html，
身体{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
背景：#eaeaea；
}
.舞台{
宽度：100%；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
透视图：1800px；
变换样式：保留-3d；
}
.盒子{
位置：绝对位置；
最高：50%；
左：50%；
宽度：3.75雷姆；
高度：3.75雷姆；
变换样式：保留-3d；
变换：rotateX（-35度）rotateY（45度）；
}
.box:第n个孩子（1）{
动画：长方体4s线性；
}
.box:第n个孩子（1）。左{
动画：左侧4s线性；
}
.盒子：第n个孩子（1）。对{
动画：右侧4s线性；
}
.盒子，前面，
.盒子，回来，
.box.top，
.盒子.底部，
.盒子，左边，
.盒子，对{
位置：绝对位置；
排名：0；
左：0；
宽度：3.75雷姆；
高度：3.75雷姆；
变换原点：中心；
}
.盒子，前面{
背景#665867；
转换：translateZ（1.875rem）；
}
.盒子，回来{
背景#665867；
转换：translateZ（-1.875rem）；
}
.盒子，上面{
背景#706171；
变换：translateY（-50%）rotateX（90度）；
}
.盒子.底部{
背景#423943；
变换：translateY（50%）rotateX（90度）；
}
.盒子，左边{
背景#776778；
变换：translateX（-50%）旋转（90度）；
}
.盒子，对{
背景#524652；
变换：translateX（50%）旋转（90度）；
}
@关键帧框{
0% {
变换：rotateX（-35度）rotateY（45度）translateX（-100px）；
}
20% {
变换：rotateX（-35度）rotateY（45度）translateX（100像素）；
}
25% {
变换：rotateX（-35度）rotateY（45度）translateX（100px）rotateY（90度）；
}
45% {
变换：translateX（100px）rotateX（-35度）rotateY（135度）translateX（200px）；
}
50% {
变换：translateX（100px）rotateX（-35度）rotateY（135度）translateX（200px）rotateY（90度）；
}
70% {
变换：translateX（-100px）rotateX（-35度）rotateY（225度）translateX（100px）；
}
75% {
变换：translateX（-100px）rotateX（-35度）rotateY（225度）translateX（100px）rotateY（90度）；
}
95% {
变换：translateX（0px）rotateX（-35度）rotateY（315度）translateX（100px）；
}
100% {
变换：translateX（0px）rotateX（-35度）rotateY（315度）translateX（-100px）rotateY（90度）；
}
}

---

您需要不断向上一个变换添加新的变换，而不改变它们以获得连续的动画。您可以平移或旋转每一步，直到完成所有路径并返回到初始路径

html，
身体{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
背景：#eaeaea；
}
.舞台{
宽度：100%；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
透视图：1800px；
变换样式：保留-3d；
}
.盒子{
位置：绝对位置；
最高：50%；
左：50%；
宽度：3.75雷姆；
高度：3.75雷姆；
变换样式：保留-3d；
变换：rotateX（-35度）rotateY（45度）；
}
.box:第n个孩子（1）{
动画：长方体4s线性无限；
}
.box:第n个孩子（1）。左{
动画：左侧4s线性；
}
.盒子：第n个孩子（1）。对{
动画：右侧4s线性；
}
.盒子，前面，
.盒子，回来，
.box.top，
.盒子.底部，
.盒子，左边，
.盒子，对{
位置：绝对位置；
排名：0；
左：0；
宽度：3.75雷姆；
高度：3.75雷姆；
变换原点：中心；
}
.盒子，前面{
背景#665867；
转换：translateZ（1.875rem）；
}
.盒子，回来{
背景#665867；
转换：translateZ（-1.875rem）；
}
.盒子，上面{
背景#706171；
变换：translateY（-50%）rotateX（90度）；
}
.盒子.底部{
背景#423943；
变换：translateY（50%）rotateX（90度）；
}
.盒子，左边{
背景#776778；
变换：translateX（-50%）旋转（90度）；
}
.盒子，对{
背景#524652；
变换：translateX（50%）旋转（90度）；
}
@关键帧框{
0% {
变换：rotateX（-35度）rotateY（45度）；
}
20% {
变换：rotateX（-35度）rotateY（45度）translateX（100像素）；
}
25% {
变换：rotateX（-35度）rotateY（45度）translateX（100px）rotateY（90度）；
}
45% {
变换：rotateX（-35度）rotateY（45度）translateX（100px）rotateY（90度）translateX（100px）；
}
50% {
变换：rotateX（-35度）rotateY（45度）translateX（100像素x）rotateY（90度）translateX（100像素x）rotateY（90度）；
}
70% {
变换：rotateX（-35度）rotateY（45度）translateX（100px）rotateY（90度）translateX（100px）rotateY（90度）translateX（100px）；
}
75% {
变换：rotateX（-35度）rotateY（45度）translateX（100像素x）rotateY（90度）translateX（100像素x）rotateY（90度）translateX（100像素x）rotateY（90度）；
}
95% {
变换：rotateX（-35度）rotateY（45度）translateX（100像素x）rotateY（90度）translateX（100像素x）rotateY（90度）translateX（100像素x）rotateY（90度）translateX（100像素x）；
}
100% {
变换：rotateX（-35度）rotateY（45度）translateX（100像素x）rotateY（90度）translateX（100像素x）rotateY（90度）translateX（100像素x）rotateY（90度）translateX（100像素x）rotateY（90度）；
}
}