css动画中svg角色的3d效果

你好，我想了解更多关于SVG动画的知识， 我想我已经掌握了如何使用@keyframes制作基本动画，但我想知道如何对我用illustrator在SVG中导出的2D角色进行3D透视

我链接了rick&morty的一个角色的代码笔演示：我尝试移动他的手臂，但是当我尝试制作3D效果时，它会产生“硬纸板”效果，我如何让它感觉更真实

html，正文{
身高：100%；
保证金：0；
}
#svg容器{
背景色：#f1f1；
身高：100%；
}
svg{
显示：块；
保证金：自动；
身高：100%；
}
普皮尔斯先生{
动画：环视14秒无限线性；
-webkit动画：环顾14秒无限线性；
-moz动画：环顾14秒无限线性；
}
@关键帧环顾四周{
0%{transform:translate（0）}
2%{transform:translate（3%，1.2%）}
4%{转换：转换（3%，1.2%）}
6%{transform:translate（-4.1%，-1.1%）}
8%{transform:translate（-4.1%，-1.1%）}
10%{变换：平移（0，0）}
50%{transform:translate（0，0）}
52%{转换：翻译（3%，-2.5%）}
54%{转换：翻译（3%，-2.5%）}
56%{transform:translate（-2.8%，1.2%）}
58%{transform:translate（-2.8%，1.2%）}
60%{transform:translate（0，0）}
100%{transform:translate（0，0）}
}
@-moz关键帧环顾四周{
0%{transform:translate（0）}
2%{transform:translate（3%，1.2%）}
4%{转换：转换（3%，1.2%）}
6%{transform:translate（-4.1%，-1.1%）}
8%{transform:translate（-4.1%，-1.1%）}
10%{变换：平移（0，0）}
50%{transform:translate（0，0）}
52%{转换：翻译（3%，-2.5%）}
54%{转换：翻译（3%，-2.5%）}
56%{transform:translate（-2.8%，1.2%）}
58%{transform:translate（-2.8%，1.2%）}
60%{transform:translate（0，0）}
100%{transform:translate（0，0）}
}
@-webkit关键帧环顾四周{
0%{transform:translate（0）}
2%{transform:translate（3%，1.2%）}
4%{转换：转换（3%，1.2%）}
6%{transform:translate（-4.1%，-1.1%）}
8%{transform:translate（-4.1%，-1.1%）}
10%{变换：平移（0，0）}
50%{transform:translate（0，0）}
52%{转换：翻译（3%，-2.5%）}
54%{转换：翻译（3%，-2.5%）}
56%{transform:translate（-2.8%，1.2%）}
58%{transform:translate（-2.8%，1.2%）}
60%{transform:translate（0，0）}
100%{transform:translate（0，0）}
}
.眼睛{
变换原点：中心38%；
动画：闪烁大小7s无限线性；
动画延迟：2s；
}
鲍皮尔先生{
不透明度：0；
变换原点：中心38%；
动画：闪烁7s无限线性，闪烁大小7s无限线性；
动画延迟：2s；
}
@关键帧闪烁{
0% {
不透明度：0；
}
11%{
不透明度：0；
}
12% {
不透明度：1；
}
13% {
不透明度：0；
}
15% {
不透明度：0；
}
17% {
不透明度：0；
}
18% {
不透明度：1；
}
19% {
不透明度：0；
}
100% {
不透明度：0；
}
}
@关键帧闪烁大小{
0% {
变换：scaleY（1）；
}
11%{
变换：scaleY（1）；
}
12% {
变换：scaleY（0.2）；
}
13% {
变换：scaleY（1）；
}
14% {
变换：scaleY（1）；
}
17% {
变换：scaleY（1）；
}
18% {
变换：scaleY（0.2）；
}
19% {
变换：scaleY（1）；
}
20% {
变换：scaleY（1）；
}
100% {
变换：scaleY（1）；
}
}
@关键帧挥舞手臂{
50% {
变换：缩放（0.3）倾斜（10度）透视（400像素）旋转（5度）；
}
100% {
变换：缩放（1）倾斜（0度）透视（0像素）旋转（0度）；
}
}
#前卫的法律{
动画：挥舞手臂2.5s无限轻松；
/*-webkit动画：挥舞手臂10秒无限轻松；
-moz动画：挥舞手臂10秒无限轻松*/
变换框：填充框；
透视图：400px；
变换原点：50%100%；
}
昂格尔斯·豪茨先生{
动画：ongleTrois 2.5s无限轻松；
变换框：填充框；；
变换原点：50%100%；
}
昂格尔·高切先生{
动画：ongleDeux 2.5s无限轻松；
变换框：填充框；
变换原点：50%100%；
}
@ongleTrois关键帧{
50% {
转化：translateY（45%）；
}
100% {
转化：translateY（0%）；
}
}
@关键帧ongleDeux{
50% {
转化：translateX（25%）；
}
100% {
转化：translateX（0%）；
}
}
#有效透视{
动画：透视Squanch 2.5s无限线性；
变换框：填充框；
变换原点：50%10%；
}
@关键帧透视挤压{
0% {
变换：比例（0）；
}
8% {
变换：比例（0.78）；
}
25%{
变换：比例（0.95）；
}
50% {
变换：比例（0.98）；
}
55% {
变换：比例（1）；
}
85% {
变换：比例（0）；
}
100%{
变换：比例（0）；
}
}

cls-2.cls-10.cls-10.cls-10.cls-10.cls-10.cls-12.cls-4.cls-4.cls-4.cls-4.cls-4.cls-4.cls-4.cls-4.cls-4.cls-4.cls-4.cls-4.cls-4.cls-4.cls-5.cls-5.cls-5.cls-6.6.cls-7.cls-7.cls-7.cls-7.cls-7.cls-7.cls-7.cls笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔笔cls-26、.cls-27、.cls-28、.cls-29、.cls-3、.cls-30、.cls-31、.cls-32、.cls-4、.cls-5、，.cls-6、.cls-7、.cls-34{笔划斜接限制：10；}.cls-17、.cls-2、.cls-25、.cls-26、.cls-27、.cls-29、.cls-32、.cls-4、.cls-34{笔划宽度：2px；}.cls-3{填充：#d3beb0；}.cls-10、.cls-12、.cls-13、.cls-21、.cls-23、.cls