如何在 CSS 中制作 3D 旋转图像？

在本教程中，我们将向您展示如何使用简单的 HTML 和 CSS-animation 属性创建一个 3D 旋转图像画廊。

解释：

在本文中，我们主要使用 CSS variable、CSS flex、object-fit、transform-style、animation、transform 和 keyframes 属性来执行此任务。要阅读有关 CSS 关键帧属性的更多信息，请参阅 https://www.geeksforgeeks.org/css-animations/ 文章。

HTML：创建结构

CSS：

css

/* Applying Global CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* Centering the content of whole body */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}
 
/* Adding transform-style CSS
    property to the boxes */
.box {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: animate 20s linear infinite;
}
 
/* Adding keyframes for animation */
@keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}
 
/* Adding CSS to all the span
    tags for animation */
.box span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform:
      rotateY(calc(var(--i) * 45deg)) translateZ(400px);
    -webkit-box-reflect:
below 0px linear-gradient(transparent, transparent, #0004);
}
 
/* Adding object-fit CSS property to all the images */
.box span img {
    position: absolute;
    top: 0;
    left: 0;
    height: 250px;
    width: 300px;
    object-fit: cover;
}

最终解决方案：

css

输出：