小编给大家分享一下css如何实现3d立体魔方,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联专业为企业提供泊头网站建设、泊头做网站、泊头网站设计、泊头网站制作等企业网站建设、网页设计与制作、泊头企业网站模板建站服务,10多年泊头做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
先看效果图吧!把这个看会了,一些网上的3d的相册你就都会了
一、我们先准备好们的html代码
3d立体魔方
好了我们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加上一点文字更容易观察
四、动画旋转
3d立体魔方 123456
好了全部代码都在这了,我已经带着你做完了,如果你想做一个3d相册的话,直接给div加上背景图就好background-color替换为background-image
五、总结
让我们讲讲细节吧!当让这也是最终要的,希望你看到。拼接的过程你们只看到了代码,首先我们制作了六个width:300px与height:300px
的div,我们通过position:absolute
让他们叠加在了一起,你只需要记住绝对定位会让层级重叠就好了z-inde:
可以控制他的层级,好了到最重要的地方了, transform:rotateX(90deg) translateZ(150px);
这里为什么我是先旋转在偏移呢?
总之一句话就是,你右转在向前进 和 你前进在右转你到达的位置是不一样的
就是这个原理。如果你明白了就算是入门了3d还有很多好玩的。等待你慢慢的摸索。
以上是“css如何实现3d立体魔方”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!