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

📅  最后修改于: 2021-10-31 04:56:55             🧑  作者: Mango

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

解释:

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

HTML:创建结构

html


 
    
        
    
 
    
 
        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
          


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


    
        
    
 
    
        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
    


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



    
        
    
 
    
        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
    

输出: