今天做有意思的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个参数时:第一个参数就是左上,第二个参数就是右上和左下的,第三个参数就是右下的。
总之,它是从左上开始,按顺时针分配数值,若有些角没有赋值,则和赋其对角相同值。