Css 具有rotateY的动画在不同的值中看起来相同

来自MDN的一些文本
由rotateY（）创建的旋转量由指定。如果为正，则为顺时针运动；如果为负，则为逆时针方向

const rotate1=[
{
变换：`rotateX（0）`
},
{
变换：`rotateY（45度）`
},
{
变换：`rotateX（0）`
}
];
常数2=[
{
变换：`rotateY（0）`
},
{
变换：`rotateY（-45度）`
},
{
变换：`rotateY（0）`
}
];
document.getElementById（'rotated1'）.onclick=function（）{this.animate（rotate11000）}
document.getElementById（'rotated2'）.onclick=function（）{this.animate（rotate21000）}
document.getElementById（'rotated1'）.animate（rotate11000）
document.getElementById（'rotated2'）。动画（rotate21000）

div{
宽度：180px；
高度：180像素；
}
#旋转1{
背景颜色：粉红色；
}
#旋转2{
背景颜色：绿色；
}

点击我
单击我

您需要添加一些透视图以获得所需：

const rotate1=[
{
变换：`rotateX（0）`
},
{
变换：`rotateY（45度）`
},
{
变换：`rotateX（0）`
}
];
常数2=[
{
变换：`rotateY（0）`
},
{
变换：`rotateY（-45度）`
},
{
变换：`rotateY（0）`
}
];
document.getElementById（'rotated1'）.onclick=function（）{this.animate（rotate11000）}
document.getElementById（'rotated2'）.onclick=function（）{this.animate（rotate21000）}
document.getElementById（'rotated1'）.animate（rotate11000）
document.getElementById（'rotated2'）。动画（rotate21000）

div{
宽度：150px；
高度：150像素；
保证金：5px；
}
#旋转1{
背景颜色：粉红色；
}
#旋转2{
背景颜色：绿色；
}
身体{
透视图：200px；
透视原点：左中；
保证金：0；
最小高度：100vh；
}

点击我
单击我

谢谢！我发现了这个很棒的网站（），它帮助我了解正在发生的事情！