3d旋转爱心

今天做有意思的3d旋转爱心，借此来复习一下css中的相关内容，先上一张成品照片

中间是一个正方体，你可以将正方体的各个面上加上照片

要做这个3d旋转爱心，首先要解决的就是如何画出外边的线条，这里用到了css中的border-radius，我们都知道border-radius是用来设置四个角的，写过border的人都知道border可以带四个参数分别设置四个边框（上左下右的顺序），同样的，border-radius也可以带四个参数，并且以顺时针的方向解析，上左，上右，下右，下左。

border的参数：border-radius: 参数1 参数2 参数3 参数4 / 参数5 参数6 参数7 参数8。没错，border有8个参数前面4个参数为四个圆角的水平半径，后面四个值是四个圆角的垂直半径如图：

但是平常我们都不写 / 后面的垂直半径，这时就默认垂直半径和水平半径对应相等

当border-radius只有2个参数时：第一个参数就是左上和右下角的，第二个参数就是右上和左下角的，

当border-radius有3个参数时：第一个参数就是左上，第二个参数就是右上和左下的，第三个参数就是右下的。

总之，它是从左上开始，按顺时针分配数值，若有些角没有赋值，则和赋其对角相同值。

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

<style>
        body {
            background-color: orange;
        }
        .left {
            position: absolute;
            left:548px;
            top: 200px;
            width: 100px;
            height: 200px;
            margin: auto;
            border: 4px solid red;
            border-radius:50% 50% 0 0 / 50% 40% 0 0;
            border-right: 0;
            border-bottom: 0;
            transform: rotate(-40deg);
        }
        .right {
            position: absolute;
            left:600px;
            top: 200px;
            width: 100px;
            height: 200px;
            margin: auto;
            border: 4px solid red;
            border-radius: 50% 50% 0/ 40% 50% 0;
            border-left: 0;
            border-bottom: 0;
            transform: rotate(40deg);
        }
    </style>

上面这段代码画出的是下图

这个图是通过对两个div的边框border，和圆角border-raidus的设置，然后旋转一定角度，通过定位拼接到一起。

接下来就是3d旋转爱心了

HTML代码：

<div class="box">
    <div class="cube">
        <div>第一面</div>
        <div>第二面</div>
        <div>第三面</div>
        <div>第四面</div>
        <div>第五面</div>
        <div>第六面</div>
    </div>
</div>

css代码：

<style>
        body {
            background-color: #000;

        }
        /*给装载爱心的盒子设计样式让其能居中显示*/
        .box {
            position: absolute;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;        /*添加3d效果*/
            animation: 10s rot linear infinite; /*添加动画*/
        }
        /*为遵循子绝父向给heart套一个相对定位的div*/
        heart3d {
            position: relative;
        }
        /*设置 心 线条*/
        .heart {
            position: absolute;
            left:90px;
            top: 0;
            width: 100px;
            height: 200px;
            border: 2px solid red;
            border-radius: 50% 50% 0/ 40% 50% 0;
            border-left: 0;
            border-bottom: 0;
        }
        /*设定关键帧*/
        @keyframes rot {
            0% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        
        /*设计正六边形的样式*/
        .cube {
            transform-style: preserve-3d;
            position: relative;
            width: 50px;
            height: 50px;
            transform: translate(115px) translateY(100px) translateZ(20px);
        }
        .cube div {
            position: absolute;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            opacity: 0.7;
        }
        .cube div:nth-child(1) {
            background-color: red;
        } 
        .cube div:nth-child(2) {
            left: 0;
            top: -50px;
            background-color: orange;
            transform-origin: bottom;
            transform: rotateX(90deg);
        }
        .cube div:nth-child(3) {
            left: 0;
            top: 50px;
            background-color: blue;
            transform-origin: top;
            transform: rotateX(-90deg);
        }
        .cube div:nth-child(4) {
            left: -50px;
            top: 0;
            background-color: green;
            transform-origin: right;
            transform: rotateY(-90deg);
        }
        .cube div:nth-child(5) {
            left: 50px;
            top: 0;
            background-color: pink;
            transform-origin: left;
            transform: rotateY(90deg);
        }
        .cube div:nth-child(6) {
            left: 0;
            top: 0;
            background-color: yellow;
            transform: translateZ(-50px);
        }
    </style>

js代码：

<script>
    var heart3d = document.getElementsByClassName('heart3d')[0]; //找到承载这些心形线条的div
    for(var i=0; i<36; i+=1){    //循环生成36个线条，并且每次都旋转一下，然后添加到heart3d中。
        var heart = document.createElement("div");
        heart.className = 'heart';
        heart.style.transform = "rotateY("+i*10+"deg) rotateZ(45deg) translateX(50px)"
        heart3d.appendChild(heart);    

    }
</script>

这样我们就成功做出了一个旋转的3d爱心。

我们知道在标准文档流中，我们想要让一个元素居中，可以通过设置宽度，然后通过margin:0 auto;(前面的0可以设置) 来实现。但是在定位中绝对定位和固定定位都脱离标准文档流了，这时居中有个办法就是，将left top right bottom 都设为0 ，然后margin:auto.就可以了，这时无论浏览器宽高怎么变都会自动居中。

3d旋转爱心

推荐阅读