Javascript 如何在单击其中一个面时对三维立方体动画进行平滑过渡？

我需要确保，当您单击其中一个面时，立方体将与该面平滑旋转，动画将停止。当你关闭面部时，尺寸逐渐减小，动画继续。也许有人做了类似的事情并分享了一个例子

现在只为顶部完成。但我无法想象如何制作平滑的动画

document.addEventListener（“DOMContentLoaded”，function（））{
让cube=document.querySelector（'#D3Cube'）；
设side1=document.querySelector（“#side1”）；
让closeBtn=document.querySelector（'.closeLink'）；
addEventListener（'mouseover'，function（）{
cube.style.animationPlayState=“暂停”；
});
addEventListener（'mouseout'，function（）{
cube.style.animationPlayState=“正在运行”；
});
side1.addEventListener（'click'，函数（）{
cube.classList.remove（“animatCube”）；
cube.classList.add（“animateTop”）；
});
closeBtn.addEventListener（'click'，function（）{
cube.classList.remove（“animateTop”）；
添加（“动画立方体”）；
});
});
#wrapD3Cube{
宽度：500px；
高度：500px；
利润率：200px自动；
}
#D3立方体{
宽度：300px；
高度：300px；
顶部：50px；
变换样式：保留-3d；
保证金：自动；
位置：相对位置；
变换样式：保留-3d；
}
.动画立方体{
动画：立方体5s线性无限；
变换：rotateX（-22度）rotateY（-38度）rotateZ（0度）；
}
.animateTop{
变换：rotateX（-90度）rotateY（0度）rotateZ（0度）scale3d（1.5,1,1.5）；
}
@关键帧立方体{
100%{变换：rotateX（-22度）rotateY（-398度）rotateZ（0度）；}
}
#D3Cube>div{
位置：绝对位置；
过渡：所有0.5s线性；
宽度：300px；
高度：300px；
浮动：左；
溢出：隐藏；
不透明度：0.85；
}
#侧面1{
变换：旋转（90度）平移（0px）平移（0px）平移（150px）；
背景颜色：紫色；
背面可见性：隐藏；
}
#侧面2{
变换：旋转（-90度）translateX（0px）translateY（0px）translateZ（150px）；
背景色：#ffaf1c；
背面可见性：隐藏；
}
#侧面3{
变换：translateX（0px）translateY（0px）translateZ（150px）；
背景色：#58d568；
背面可见性：隐藏；
}
#侧面4{
变换：旋转（90度）平移（0px）平移（0px）平移（150px）；
背景色：#ed3030；
背面可见性：隐藏；
}
#侧面5{
变换：旋转（180度）平移（0px）平移（0px）平移（150px）；
背景色：#1c5ffe；
背面可见性：隐藏；
}
#侧面6{
变换：rotateX（-90度）translateX（0px）translateY（0px）translateZ（150px）；
背景色：#f215；
背面可见性：隐藏；
}

2.
3.
4.
5.
6.
单击面时，可以使用
getComputedStyle（cube）.getPropertyValue（“transform”）
在单击面时获取变换的当前状态。

然后，在transform属性中应用它以设置该状态，删除动画，添加类以显示面（
animateTop
），最后删除刚刚为类设置的内联变换以使其生效

当返回正常状态时，删除内联停止的
动画
，一些
立方体
动画将发生。5秒钟后，将删除
animateTop
，然后只有动画将继续运行

为了更好地控制，我还创建了两个变量：
open
，用于检查面何时打开或关闭。和
更改
以检查何时转换为打开或关闭


let open=false；
让改变=错误；
document.addEventListener（“DOMContentLoaded”，function（））{
让cube=document.querySelector（'#D3Cube'）；
设side1=document.querySelector（“#side1”）；
side1.addEventListener（'click'，函数（）{
如果（更改）{
返回；
}
如果（！打开&&！更改）{
开放=真实；
改变=真实；
cube.classList.add（'open'）
var compTransform=getComputedStyle（多维数据集）.getPropertyValue（“转换”）；
cube.style.transform=compTransform；
cube.style.animation='none'；
cube.classList.add（“animateTop”）；
setTimeout（函数（）{
cube.classList.remove（'closed'）
cube.style.removeProperty（'transform'）；
}, 50);
setTimeout（函数（）{
改变=错误；
}, 1640);
}else if（打开和更改）{
开=假；
改变=真实；
cube.classList.remove（'open'）
setTimeout（函数（）{
cube.classList.remove（“animateTop”）；
cube.classList.add（'closed'）
改变=错误；
}, 4999);
cube.style.removeProperty（“动画”）；
}
});
});
#wrapD3Cube{
宽度：500px；
高度：500px；
利润率：200px自动；
}
#D3立方体{
宽度：300px；
高度：300px；
顶部：50px；
变换样式：保留-3d；
保证金：自动；
位置：相对位置；
变换样式：保留-3d；
过渡：1.64s；
}
#D3Cube。关闭：悬停{
动画播放状态：暂停；
过渡：动画0s；
}
.closeLink{
颜色：#f7f7f7；
背景色：#333；
字体大小：20px；
}
.动画立方体{
动画：立方体5s线性无限；
变换：rotateX（-22度）rotateY（-38度）rotateZ（0度）；
}
.animateTop{
变换：rotateX（-90度）rotateY（0度）rotateZ（0度）scale3d（1.5,1,1.5）；
}
@关键帧立方体{
100%{变换：rotateX（-22度）rotateY（-398度）rotateZ（0度）；}
}
#D3Cube>div{
位置：绝对位置；
过渡：所有0.5s线性；
宽度：300px；
高度：300px；
浮动：左；
溢出：隐藏；
不透明度：0.85；
}
#侧面1{
变换：旋转（90度）平移（0px）平移（0px）平移（150px）；
背景颜色：紫色；
背面可见性：隐藏；
}
#侧面2{
变换：旋转（-90度）translateX（0px）translateY（0px）translateZ（150px）；
背景色：#ffaf1c；
背面可见性：隐藏；
}
#侧面3{
转换：translateX（0px）