是谁说程序猿只会码代码的？
程序猿浪漫起来吓死人~一万种玩法带你打动心仪的女孩子~
今天云牧老师先来小露一手~
#3D盒子-CSS3立体盒子的制作
效果如下 ↓ ↓ ↓
是不是很酷炫~把她的照片放进去制作完之后。装作不经意的发送给她说
“嘿，我抓住一堆流星每天点亮我的星空，今天放在盒子里送给你哦~”
下面我们开始吧：
3D基础知识
· 电脑上游览器绘制的不是真正的3D物体,而是游览器模拟出来的3D,是3d空间在屏幕当中的投影
· 怎么模拟的呢?利用的就是景深,即近大远小的概念.我们绘画领域叫做透视法则,浏览器透视：把近大远小的所有图像，透视在屏幕上
· 如果我们能够模拟这样的效果,我们就可以欺骗我们的大脑,让大脑以为这是一个真实的3D空间,最终我们可以实现3D效果.
轴向
· 前端立体空间坐标系由X,Y,Z轴组成.X和Y轴分别代表水平和竖直的两条轴,Z轴就是由屏幕到眼睛的轴.
现在就开始写我们的代码吧~~
首先是我们的HTML结构,我们这里只写一个立体正方形.
首先一上下左右前后,相应个正方形得有六个相同面我们去写六个html元素.
接着我们来写CSS样式
首先设置最外层大盒子的样式.
接着设置子元素的样式.
这时候分别移动六个面的Z轴形成正方体
此时3D盒子就已经出来了我们去让它旋转吧.
我们去设置动画的具体效果吧.
这时候你会发现是一个扁的平面在旋转,不是我们正方体旋转,这是因为我们没有开启大盒子的3D空间
可是这时候又发现了为什么每个面都不一样大?因为这时候我们的视距还是在大盒子之上,相当于我们站在大盒子去看,这是我们就想单独站在每个小盒子上去看.
这时候我们一个简单旋转的3D盒子就制作完成了.下面是全部源码 ✔
↓ ↓ ↓
贴心的附上****祝你一臂之力哦~(*≧▽≦*)