rotateY 的动画在不同的值下看起来相同

Question

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

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)

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

#rotated1 {
  background-color: pink;
}

#rotated2 {
  background-color: green;
}

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

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

请看看这个demo

这让我很困惑..

我期望的是：http://img.htmleaf.com/1610/rotateY-demo.jpg

Answer 1

你需要添加一些视角才能得到你想要的：

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)

div {
  width: 150px;
  height: 150px;
  margin:5px;
}

#rotated1 {
  background-color: pink;
}

#rotated2 {
  background-color: green;
}

body {
  perspective:200px;
  perspective-origin:left center;
  margin:0;
  min-height:100vh;
}

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

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

或者像下面这样：

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

const rotate2 = [
  {
    transform: `perspective(200px) rotateY(0)`
  },
  {
    transform: `perspective(200px) rotateY(-45deg)`
  },
  {
    transform: `perspective(200px) 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)

div {
  width: 150px;
  height: 150px;
  margin:5px;
}

#rotated1 {
  background-color: pink;
}

#rotated2 {
  background-color: green;
}

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

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

一些相关问题了解更多详情：

perspective and translateZ moves diagonally

CSS 3d transform doesn't work if perspective is set in the end of property