css如何实现3d立体魔方
小编给大家分享一下css如何实现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{ 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;}body{ height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center;}
现在你们看到的是这个效果，明明6个方块怎么只有一个，其实并不是，只是其他的div在这个div的后面，前面这个div挡住我们的视线了所以看不见。
三、开启3d空间
body{ transform-style: preserve-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{ 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还有很多好玩的。等待你慢慢的摸索。
以上是“css如何实现3d立体魔方”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341