如何使用html+css制作一个3D立体相册

阅读：863 来源：乙速云作者：代码code

如何使用html+css制作一个3D立体相册

一、先看效果

二、实现步骤

1.我们知道一个正方体有6个面，所以定义一个父亲元素然后定义6个子元素作为6个面。每个面放一张图片。里面q1表示前面，h3表示后面，以此类推，就是首拼音。

2.让父元素定位，设立方体长宽，然后必须添加属性transform-style: preserve-3d;

 .baba{
            position: relative;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
   
        }

3.让子元素和图片跟父元素一样长宽。让它有点透明度。

 .baba div{
            position: absolute;
           width: 100%;
           height: 100%;
           opacity: 0.8;
        }
        .baba img{
            width: 100%;
            height: 100%;
        }

4.重要一步，给6个面设置位置。

.q1{
            transform: translateZ(150px);
        }
        .h3{
            transform: rotateY(180deg) translateZ(150px);
        }
        .z3{
            transform: rotateY(-90deg) translateZ(150px);
        }
        .y4{
            transform: rotateY(90deg) translateZ(150px);
        }
        .s5{
            transform: rotateX(90deg) translateZ(150px);
        }
        .x6{
            transform: rotateX(-90deg) translateZ(150px);
        }

5.这样立方体就设置好了，不过我们看不出来，所以让立方体转起来。给父元素添加animation属性

.baba{
            position: relative;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            animation: zuan 6s linear alternate infinite;
            
        }

  @keyframes zuan{
           
            0%,5%{
                transform: rotateY(90deg);
            }
            20%,25%{
                transform: rotateY(180deg);
            }
            40%,45%{
                transform: rotateY(270deg);
            }
            60%,65%{
                transform:  rotateX(-90deg);
            }
            80%,85%{
                transform: rotateX(0deg);
            }
            95%,100%{
                transform: rotateX(90deg);
            }
            
        }

完整代码：




    
    
    Document

分享到：

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们： hlamps#outlook.com （#换成@）。

上一篇： numpy数组的重塑和转置如何实现

下一篇： Numpy数组操作之元素添加、删除和修改怎么实现

你可能感兴趣