css - 具有rotateY的动画的不同值看起来相同

来自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

最佳答案

您需要添加一些角度以获得所需的内容：

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

关于css - 具有rotateY的动画的不同值看起来相同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59021242/