用CSS怎样做一个3D魔方？一文带你看透过程
发布时间：2023-08-15 14:24:41 所属栏目：语言 来源：
导读： 用CSS怎样做一个3D魔方？有一些朋友看到一些网站上有做3D相册的效果，感觉很炫酷、很好看。其实实现3D相册效果并不难，这里我们通过一个简单的3D魔方实现示例给大家来讲讲，用CSS怎样做出3D效果，看懂这篇大家就能够
|
用CSS怎样做一个3D魔方？有一些朋友看到一些网站上有做3D相册的效果，感觉很炫酷、很好看。其实实现3D相册效果并不难，这里我们通过一个简单的3D魔方实现示例给大家来讲讲，用CSS怎样做出3D效果，看懂这篇大家就能够自己尝试做3D相册了。本文的3D魔方实现效果及代码如下： 一、我们先准备好们的html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title>3d立体魔方</title> <meta charset="UTF-8"> </head> <body> <div class="top"></div> <!--上 --> <div class="bottom"></div> <!--下 --> <div class="left"></div> <!--左 --> <div class="right"></div> <!--右 --> <div class="after"></div> <!--后 --> <div class="before"></div> <!--前 --> </body> </html> 好了我们html代码就准备完成了,首先我们要有一个3d的思维,在大脑中现象一下魔方是什么样子的,不就是用六个面组成的吗。 二、添加css样式 *{ margin:0; /* 默认样式去掉边距 */ padding:0; } div{ /* div通用样式 设置高宽*/ width: 300px; height: 300px; opacity:0.5; /*透明度 半透明*/ } .top{ /* 通过类名设置颜色下面都是设置颜色*/ background-color:brown; } .bottom{ background-color:blueviolet; } .left{ background-color:blanchedalmond; } .right{ background-color:cadetblue; } .after{ background-color:chocolate; } .before{ background-color:cyan; } 好了到了这一步就相当与把地基打好了，我们开始盖楼了 你看到的必须是这个效果注意我这里是缩小了，你应该也是和我一样方块都是挨着的，像柱子一样堆着的。这下我们就要开始像纸片一样把他们拼凑起来了。 2、让div重合 div{ width: 300px; height: 300px; position: absolute; /*在div的通用样式中加上绝对定位*/ } body{ /*下面这一步是居中让所有的div在屏幕上居中*/ height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } 现在你们看到的是这个效果，明明6个方块怎么只有一个，其实并不是，只是其他的div在这个div的后面，前面这个div挡住我们的视线了所以看不见。 三、开启3d空间 body{ transform-style: preserve-3d; /*只需要这一条代码开启3d空间*/ height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } 在把div拼凑起来 .top{ background-color:brown; transform:rotateX(90deg) translateZ(150px); /*先旋转在偏移*/ } .bottom{ background-color:blueviolet; transform:rotateX(-90deg) translateZ(150px); } .left{ background-color:blanchedalmond; transform:rotateY(-90deg) translateZ(150px); } .right{ background-color:cadetblue; transform:rotateY(90deg) translateZ(150px); } .after{ background-color:chocolate; transform:rotateY(180deg) translateZ(150px); } .before{ background-color:cyan; transform:rotateY(0deg) translateZ(150px); } 你们看到的应该还是这个样子，其实我们已经完成了魔方的拼接，只是魔方是平放着的我们看不出来，所以做一个动画旋转一下就ok了。你给div加上一点文字更容易观察 四、动画旋转 <!DOCTYPE html> <html lang="zh-CN"> <head> <title>3d立体魔方</title> <meta charset="UTF-8"> <style type="text/css"> *{ margin:0; /* 默认样式去掉边距 */ padding:0; } div{ width: 300px; height: 300px; position: absolute; opacity: 0.5; text-align: center; line-height: 300px; } body{ transform-style: preserve-3d; height: 100vh; animation: fram1 10s ease; /*引用动画*/ width: 100vw; display: flex; justify-content: center; align-items: center; } .top{ background-color:brown; transform:rotateX(90deg) translateZ(150px); } .bottom{ background-color:blueviolet; transform:rotateX(-90deg) translateZ(150px); } .left{ background-color:blanchedalmond; transform:rotateY(-90deg) translateZ(150px); } .right{ background-color:cadetblue; transform:rotateY(90deg) translateZ(150px); } .after{ background-color:chocolate; transform:rotateY(180deg) translateZ(150px); } .before{ background-color:cyan; transform:rotateY(0deg) translateZ(150px); } @keyframes fram1{ /*动画旋转X轴与Y轴*/ 0%,100%{ transform: rotateY(0deg) rotateX(0deg); } 50%{ transform: rotateY(180deg) rotateX(180deg); } } </style> </head> <body> <!--加入文字让视觉更加清晰--> <div class="top">1</div> <div class="bottom">2</div> <div class="left">3</div> <div class="right">4</div> <div class="after">5</div> <div class="before">6</div> </body> </html> 好了全部代码都在这了，我已经带着你做完了，如果你想做一个3d相册的话,直接给div加上背景图就好background-color替换为background-image 五、总结 让我们讲讲细节吧!当让这也是最终要的，希望你看到。拼接的过程你们只看到了代码，首先我们制作了六个width:300px与height:300px的div，我们通过position:absolute让他们叠加在了一起，你只需要记住绝对定位会让层级重叠就好了z-inde:可以控制他的层级，好了到最重要的地方了， transform:rotateX(90deg) translateZ(150px);这里为什么我是先旋转在偏移呢? 总之一句话就是，你右转在向前进 和 你前进在右转你到达的位置是不一样的就是这个原理。如果你明白了就算是入门了3d还有很多好玩的。等待你慢慢的摸索。 （编辑：驾考网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
