html代码制作3d相册

3D相册是一种炫酷的效果，对于展示产品、展览等都有良好的效果。HTML代码可以制作3D相册，下面是演示用到的HTML代码：

    div class="box">
            div class="container">
                div class="row">
                    div class="column">
                        img src="pic1.jpg" alt="Alps" style="width:100%">
                    /div>
                    div class="column">
                        img src="pic2.jpg" alt="Lights" style="width:100%">
                    /div>
                    div class="column">
                        img src="pic3.jpg" alt="Nature" style="width:100%">
                    /div>
                    div class="column">
                        img src="pic4.jpg" alt="Snow" style="width:100%">
                    /div>
                /div>
            /div>
        /div>

以上就是简单的HTML代码，接下来，我们要使用CSS为其添加3D效果：

    .container {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-perspective: 1000px;
     /*透视*/        perspective: 1000px;
            -webkit-perspective-origin: center;
            perspective-origin: center;
    }
    .column {
            -webkit-transform: translateZ(-50px);
     /*位置*/        transform: translateZ(-50px);
            -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
            max-width: 25%;
            padding: 5px;
    }
    .column img {
            -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
            -webkit-transform: scale(0.8);
     /*缩放*/        transform: scale(0.8);
    }
    .column img:hover {
            -webkit-transform: scale(1.1);
     /*鼠标悬浮*/        transform: scale(1.1);
    }
    /*以下是响应式设计*/    @media screen and (max-width: 800px) {
        .column {
                -ms-flex-preferred-size: 50%;
                flex-basis: 50%;
                max-width: 50%;
        }
    }
    @media screen and (max-width: 600px) {
        .column {
                -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
                max-width: 100%;
        }
    }
    

好了，现在打开浏览器，就可以看到制作好的3D相册了。是不是，很简单呢！自己试试吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！