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

📅  最后修改于: 2021-08-30 02:25:02             🧑  作者: Mango

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

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

HTML代码:

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


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

输出: