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

Question

我正在尝试在 CSS 中旋转 animation 时应用透视。

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

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

.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; 
}

如何同时应用旋转 animation 和透视？ 就好像图像在旋转，而观众正在以透视的方式观看它。

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

 .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

继续在 animation 中使用您的 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>