java旋转爱心_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个参数时：第一个参数就是左上，第二个参数就是右上和左下的，第三个参数就是右下的。

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