html代码弄3d心形相册

最近我学习了如何使用HTML代码制作出一个非常美丽、特别的3D心形相册，非常的好看，今天就跟大家分享一下这个制作方法。

首先我们要准备需要的代码，下面是整个制作过程的代码：

    div class="container">
            div class="heart-container">
                div class="shadow">
    /div>
                div class="heart">
    /div>
            /div>
        /div>
            !--css样式-->
        style>
        .container {
                width: 300px;
                height: 300px;
                margin: 50px auto;
                position: relative;
                perspective: 1000px;
        }
        .heart-container {
                width: 200px;
                height: 200px;
                transform-style: preserve-3d;
                transform: rotateX(65deg) rotateZ(45deg);
                position: absolute;
                top: 50%;
                left: 50%;
                transform-origin: center center;
                perspective: inherit;
        }
        .heart {
                position: absolute;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background-color: #FF3366;
                transform-style: preserve-3d;
                transform: rotateY(45deg) rotateX(45deg);
        }
        .heart-container:hover .heart {
                transform: rotateY(45deg) rotateX(-45deg) translateZ(100px);
                box-shadow: rgba(0, 0, 0, 0.14) 0px 1px 8px;
        }
        .shadow {
                position: absolute;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background-color: rgba(0, 0, 0, 0.2);
                transform: translateZ(-1px);
        }
        .heart:before, .heart:after {
                content: "";
                position: absolute;
                width: 100px;
                height: 150px;
                background-color: #FF3366;
                border-radius: 50%;
        }
        .heart:before {
                left: 50px;
                top: 0px;
        }
        .heart:after {
                left: 0px;
                top: 50px;
        }
        /style>
    

接下来，让我们来解析一下这些代码的意义：

首先我们有一个容器container，这是一个总的容器，接下来心形相册heart-container就是指这个3D心形相册的主要主体，有阴影的shadow、3D心形heart，这三类是心形相册的主要构成部分。

接下来是CSS代码，这些CSS代码是控制心形相册的样式效果，包括心形容器的大小、位置、旋转角度等等。而hover效果是当鼠标悬停在相册上时产生的动画效果，让相册更加生动。

整个代码构成中，最关键的是使用了preserve-3d这个属性，使我们的心形图形具备了3D的效果和立体与真实感。

通过简单的HTML代码和CSS样式，我们实现了一个非常炫酷的3D心形相册，是不是非常的有趣呢？快来试试吧~

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