云牧-带你制作表白神器！~

Myth丶恋晨 2023-07-09 06:22 108阅读 0赞

![format_png][]

#     #

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

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

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

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

**效果如下    ↓     ↓    ↓**

![format_png 1][]

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

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

**下面我们开始吧：**

**3D基础知识**

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

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

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

**轴向**

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

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

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

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

![format_png 2][]

接着我们来写CSS样式

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

![format_png 3][]

接着设置子元素的样式.

![format_png 4][]

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

![format_png 5][]

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

![format_png 6][]

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

![format_png 7][]

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

![format_png 8][]

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

![format_png 9][]

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

**          ↓   ↓   ↓         **

![format_png 10][]

![format_png 11][]

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

![format_png 12][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVSkZDOThKeWVuWXc3Rmo0d3hUWVBnWGdQeHlOSktLeU9iMjdkNkVzVlJQNHR1S1RicHE2UzlSMG9TNUlCMUs0a3hGVmhtd2hVcm9pY0EvNjQw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVTG1MaWNma0xMT2xwQWFsQWljbHA2Y0xDR1RrVEp6OHBnVVFObGliYVJaVHlMdXlRd3c3VXliOU5EaWFZcWNBa0psaWE4TlFoM2lhTG13RU9hdy82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTG1MaWNma0xMT2xwQWFsQWljbHA2Y0xDTnhvS3RPdGEyNklGYTc5eGJXbmpNeHhzVlp5bXV5eTBpYzNMaWE4aWFwN050RFBVcHo1WlgzdzZRLzY0MA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTG1MaWNma0xMT2xwQWFsQWljbHA2Y0xDMDR1aWFQRzdTRmROV0kzRW9pYVdKOTJjSUlUNEJMZ0FiWnFmTXJmd0hZRklrbHcxZXBMWlFTcncvNjQw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTG1MaWNma0xMT2xwQWFsQWljbHA2Y0xDSjh0Mk5pY0lLOWxPT01XaWNBaG1kV1Y1SVZYdXNpYlYxeVNBV3RWcGZkQ1p4VFRDZDkyN3Zxc1p3LzY0MA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTG1MaWNma0xMT2xwQWFsQWljbHA2Y0xDTkVySnRLb1QzeExGb3RsUVZtVEw0ZUVUY0ZmWVpEMzVHRW5YUm5FeExlN1EyWHNzSlE2dE5nLzY0MA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTG1MaWNma0xMT2xwQWFsQWljbHA2Y0xDcGJPeUFScXNpYVZSVVl3emRhNGljNTJ4c0NRUnV6SUlyOXVvMG1TSWljeU5qOEdhcmJZa09PRE93LzY0MA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTG1MaWNma0xMT2xwQWFsQWljbHA2Y0xDdmRVUEZWam5hTlZScU82WFJDTlBzek5SNVA5UXpHVUZ6eGFDVVp0eVFlb0U2SHJYU2FCdWh3LzY0MA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTG1MaWNma0xMT2xwQWFsQWljbHA2Y0xDSnMxMXM1MnJBUTB5dEgyWDZqZnNhbU1VRHF5YzBxN21wcW95TFBweFNRaWI2MEUxVTRoaWNoSXcvNjQw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTG1MaWNma0xMT2xwQWFsQWljbHA2Y0xDc3lBV0RrYkRKVXpYT2licFVreVRtb2NNR3lTbUtCNHQ1S0lVM2liSWNGOHQwcHBSc2FqUGI1dGcvNjQw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTG1MaWNma0xMT2xwQWFsQWljbHA2Y0xDSDdpYjFxdFB4M0VBc1RnaE5Gd2ljM0Y4OXc4RmQ3MjREUVNDVzdnWmxkMGI4Q1pZcThHcFhVdFEvNjQw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTG1MaWNma0xMT2xwQWFsQWljbHA2Y0xDZUVwZWNCN21ZcWdmQ216TjA1WkxPUDBmSzl0dmMzQnFYZ3locEtadGljMnJpYmZpYVBmaWNXQmE4US82NDA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVSkZDOThKeWVuWXc3Rmo0d3hUWVBnWGFIdG90Z0g1cGliZG5YUWlhTkx2UXVyOHNKa2FieEhUd1hHSEp6Uk1XZjlBbHpLNmRabWVJMkF3LzY0MA?x-oss-process=image/format,png