css3制作3D效果 LoveHeart(小小的表白神器)---包含思路

本文链接：https://blog.csdn.net/qq_41257129/article/details/88555144

在这里插入图片描述

这是用css3做出来的一个小小的特效，最主要运用的是css3中transfrom的用法。
思路：1：首先外部有一个heard的大盒子，用来包裹里面的照片盒子cube，将其设置transform-style：preserve-3d;(设置3d环境),并且使其旋转，以便看到cube的3d效果。
2：cube盒子也设置为3d环境
3：cube里面的img分别用一个div包裹，分别做cube的6个面，
分别对其设置transform属性，将其位置调到cube的6个面上。
4：创建包裹cube的心型。它是由36个大小与heard盒子相同的盒子构成，其中每一个盒子都去掉border-left，border-bottom，设置border-radius: 50% 50% 0/ 40% 50% 0;使其形状变成半个爱心形状。由于心型由36个盒子通过旋转构成的，采用js循环创建每一个盒子，并为其设置 line.style.transform = " rotateY("+ i * 10 +"deg) rotateZ(4时5deg) translateX(150px) ，让每一个盒子随着i的增加，绕Y轴旋转的角度也随之增加10deg
5:为heard设置animation(动画)使其达到3D旋转效果。关键帧如下：
@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
100%{
transform: rotateY(720deg) rotateX(360deg) rotate(360deg);
}
}


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        img{
            width: 200px;
            height: 200px;
        }
        body{
            background-color: #000;
            /* 景深 */
            perspective: 1000px;
        }
        #heard {
            width: 300px;
            height: 600px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            /* 使其旋转看到cube的立体效果 */
            transform: rotateX(15deg) rotateZ(40deg);
            animation: rotate 10s linear infinite;
        }
        @keyframes rotate {
            0% {
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }
            100%{
                transform: rotateY(720deg) rotateX(360deg) rotate(360deg);
            }
        }
        .cube{
            width: 200px;
            height: 200px;
            position: absolute;
            top:0px;
            left: 0px;
            transform-origin: 50% 50% ;
             /* 设置3D环境 */
             transform-style: preserve-3d;
             /* 移动元素 */
             transform:  translateX(60px) translateY(300px) translateZ(60px);
        }
        .cube>div{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0px;
            left: 0px;
            border: 1px solid #000;
        }
        .front {
            transform: translateZ(100px);
        }
        .back {
            transform: translateZ(-100px) rotateY(180deg);
        }
        .left {
            transform: translateX(-100px) rotateY(-90deg);
        }
        .right{
            transform: translateX(100px) rotateY(90deg);
        }
        .top{
            transform: translateY(100px) rotateX(90deg);
        }
        .bottom{
            transform: translateY(-100px) rotateX(-90deg);
        }
        /*爱心的连边框*/
        .line {
            width: 300px;
            height: 600px;
            position: absolute;
            top:0;
            left: 0;
            border: 3px solid  #e4393c;
            border-left:0;
            border-bottom: 0;
            border-radius: 50%  50% 0/  40% 50% 0;
        }
    </style>
</head>
<body>
    <div id="heard">
        <div class="cube">
            <div class="front">
                <img src="images/195879243088111386.jpg" alt="">
            </div>
            <div class="back">
                <img src="images/269640817264076902.jpg" alt="">
            </div>
            <div class="left">
                <img src="images/433009550641076123.jpg" alt="">
            </div>
            <div class="right">
                <img src="images/440631776022353177.jpg" alt="">
            </div>
            <div class="top">
                <img src="images/514592520347249911.jpg" alt="">
            </div>
            <div class="bottom">
                <img src="images/895994212257750117.jpg" alt="">
            </div>
        </div>
        <!-- <div class="heard"></div> -->
    </div>
</body>
</html>
<script>
    //获取元素
    var heard = document.getElementById("heard");
    for(var i = 0; i < 36 ;i++)
    {
        var line = document.createElement("div");
        line.className = "line";
        line.style.transform = " rotateY("+ i * 10 +"deg)  rotateZ(45deg) translateX(150px) ";
        heard.appendChild(line);
    }
</script>