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

Question

我正在尝试应用视角旋转动画在 CSS.

中开启

但是，它只能以任何一种方式工作，就像

仅旋转有效或透视仅有效，如下所示。这个或者

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

这个

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

如何同时应用旋转动画和透视？就好像图像在旋转，观众正在用一个视角观看它。

完整代码link在下面link.

.vinyl {
    width: 200px;
    display: block;
    margin: auto;
    opacity: 0.8;
/*     transform: rotate3d(1,0,0,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>

Answer 1

继续在动画中使用 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, 0, 0, 45deg) rotate(0);
  }
  to {
    transform: rotate3d(1, 0, 0, 45deg) rotate(360deg);
  }
}

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

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

CSS- Applying perspective while rotating an img in css

html

css

image

perspective