您的位置：首页 > 其它

3d旋转爱心

2017-09-07 12:33 281 查看

今天做有意思的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.就可以了，这时无论浏览器宽高怎么变都会自动居中。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航