示例

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/rotateY -->

<div id="rotated1">click me</div>

<div id="rotated2">click me</div>

CSS

div {
  width: 180px;
  height: 180px;
}

#rotated1 {
  background-color: pink;
}

#rotated2 {
  background-color: green;
}

JavaScript

const rotate1 = [
  {
    transform: `rotateX(0)`
  },
  {
    transform: `rotateY(45deg)`
  },
  {
    transform: `rotateX(0)`
  }
];

const rotate2 = [
  {
    transform: `rotateY(0)`
  },
  {
    transform: `rotateY(-45deg)`
  },
  {
    transform: `rotateY(0)`
  }
];

document.getElementById('rotated1').onclick = function(){this.animate(rotate1,1000)}
document.getElementById('rotated2').onclick = function(){this.animate(rotate2,1000)}

document.getElementById('rotated1').animate(rotate1,1000)
document.getElementById('rotated2').animate(rotate2,1000)