是谁说程序猿只会码代码的？

程序猿浪漫起来吓死人~一万种玩法带你打动心仪的女孩子~

今天云牧老师先来小露一手~

#3D盒子-CSS3立体盒子的制作

效果如下    ↓     ↓    ↓

是不是很酷炫~把她的照片放进去制作完之后。装作不经意的发送给她说

“嘿，我抓住一堆流星每天点亮我的星空，今天放在盒子里送给你哦~”

下面我们开始吧：

3D基础知识

 · 电脑上游览器绘制的不是真正的3D物体,而是游览器模拟出来的3D,是3d空间在屏幕当中的投影

 · 怎么模拟的呢?利用的就是景深,即近大远小的概念.我们绘画领域叫做透视法则,浏览器透视：把近大远小的所有图像，透视在屏幕上

 · 如果我们能够模拟这样的效果,我们就可以欺骗我们的大脑,让大脑以为这是一个真实的3D空间,最终我们可以实现3D效果.

轴向

 · 前端立体空间坐标系由X,Y,Z轴组成.X和Y轴分别代表水平和竖直的两条轴,Z轴就是由屏幕到眼睛的轴.

现在就开始写我们的代码吧~~

首先是我们的HTML结构,我们这里只写一个立体正方形.

首先一上下左右前后,相应个正方形得有六个相同面我们去写六个html元素.

接着我们来写CSS样式

首先设置最外层大盒子的样式.

接着设置子元素的样式.

这时候分别移动六个面的Z轴形成正方体

此时3D盒子就已经出来了我们去让它旋转吧.

我们去设置动画的具体效果吧.

这时候你会发现是一个扁的平面在旋转,不是我们正方体旋转,这是因为我们没有开启大盒子的3D空间

可是这时候又发现了为什么每个面都不一样大?因为这时候我们的视距还是在大盒子之上,相当于我们站在大盒子去看,这是我们就想单独站在每个小盒子上去看.

这时候我们一个简单旋转的3D盒子就制作完成了.下面是全部源码 ✔

          ↓   ↓   ↓         

贴心的附上视频教程祝你一臂之力哦~(*≧▽≦*)

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！