CSS - 在 css 中旋转 img 时应用透视

如何解决CSS - 在 css 中旋转 img 时应用透视

我正在尝试应用透视 旋转动画在 CSS 中启用。

然而，它只能以任何一种方式工作

旋转仅起作用或透视仅起作用，如下所示。 这个或

.vinyl {
    width: 200px;
    display: block;
    margin: auto;
    opacity: 0.8;
    transform: rotate3d(1,45deg)
}

这个

.vinyl {
    width: 200px;
    display: block;
    margin: auto;
    opacity: 0.8;
/*     transform: rotate3d(1,45deg); */
    animation: rotation 2s infinite linear; 
}

如何同时应用旋转动画和透视？ 就好像图像在旋转，而观看者正在以透视图观看。

完整代码链接在以下链接中。

.vinyl {
    width: 200px;
    display: block;
    margin: auto;
    opacity: 0.8;
/*     transform: rotate3d(1,45deg); */
    animation: rotation 2s infinite linear; 
}

.container{
transform-style: preserve-3d;
perspective: 350px;
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

<div class="container">
<img class = 'vinyl' src="https://picsum.photos/seed/picsum/200/300" alt="">
</div>

解决方法

继续在动画中使用您的 3D 变换：

.vinyl {
  width: 200px;
  display: block;
  margin: auto;
  opacity: 0.8;
  animation: rotation 2s infinite linear;
}

.container {
  transform-style: preserve-3d;
  perspective: 350px;
}

@keyframes rotation {
  from {
    transform: rotate3d(1,45deg) rotate(0);
  }
  to {
    transform: rotate3d(1,45deg) rotate(360deg);
  }
}

<div class="container">
  <img class='vinyl' src="https://picsum.photos/seed/picsum/200/300" alt="">
</div>