使用 CSS 旋转 3D 图像预览器立方体

3D 旋转图像预览器立方体是一种效果，其中一组图像出现在旋转 3D 立方体的面上。这种效果可以使用 HTML 和 CSS 来创建。

方法：动画 HTML 对象的最佳方法是使用 CSS @keyframes 并在不同的动画状态设置过渡状态。

HTML代码：

• 创建一个 HTML 文件 (index.html)。
• 将提供所有动画效果的 HTML 中的 CSS 文件链接到我们的 HTML。它位于 标签内。
• 为立方体的每个面创建 6 个
  标签，并将您的图像放在每个面上。

CSS 代码：以下是上述 HTML 代码中使用的“style.css”文件的内容。 CSS 用于为我们的 HTML 页面提供不同类型的动画和效果，使其看起来对所有用户都具有交互性。

• 创建一个 body 类来为整个页面提供通用样式。
• 为立方体的每个面创建 id 和类以提供样式。
• 使用@keyframes 为 HTML 元素设置动画。

CSS

/* CSS for general styling */
body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: #1e6f0a;
}
  
.cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 10s linear infinite;
}
  
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  
.box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.9;
}
  
/* Applying styles to each face */
.box1 {
    transform: translateZ(100px);
}
  
.box2 {
    transform: rotateY(90deg) translateX(100px);
    transform-origin: right;
}
  
.box3 {
    transform: rotateY(180deg) translateZ(100px);
}
  
.box4 {
    transform: rotateY(-90deg) translateX(-100px);
    transform-origin: left;
}
  
.box5 {
    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top;
}
  
.box6 {
    transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom;
}
  
/* Animating the elements */
@keyframes rotate {
    0%,
    100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotateY(90deg) rotateZ(90deg);
    }
    40% {
        transform: rotateY(180deg) rotateZ(-90deg);
    }
    60% {
        transform: rotateY(270deg) rotateZ(90deg);
    }
    80% {
        transform: rotateY(360deg) rotateZ(-90deg);
    }
}

输出：