画个电脑机箱（练手）

马黑黑

机箱存在于一个自然的空间，但在二维的web世界里，我们要展现机箱，需要给他一个“舞台”，这个舞台就是父元素，由它来定位机箱在浏览器视界中的位置，还对机箱的元素进行归拢，并负责渲染一些效果。所以，我们先给机箱做一个场景：

.stage {
   margin: 50px auto 0;
   width: 250px;
   height: 250px;
   transform-style: preserve-3d;
   perspective: 1000px;
}

这个场景，我们设定了3d渲染样式以及景深，毕竟我们要制作的机箱是立体的。它之下，将由若干个子元素去构建机箱实体，这些子元素会有共同的属性，所以，让我们先写好这些子元素的共性设置：

.stage div {
   position: absolute;
   font: 1.5em / 2em Arial;
   text-align: center;
   border: 1px solid #aaa;
   background: rgba(0,0,0,.6);
}

以上，设定了定位、边框和背景色，以及文本相关的项目（我们会给机箱的各个面写上标识，所以字体方面需要设定一下）。

现在可以开始绘制机箱了。假如机箱就在我们的左前方，我们其实看到的只有机箱的三个面：正面、顶部和机箱的一个侧面。让我们先来画机箱的正面：

.stage div:nth-child(1) {
   width: 110px;
   height: 250px;
   left: 0;
   top: 50px;
}

它很简单，尺寸、定位的设置。top值为什么是50px？这与机箱顶部的高度有关，我们来看机箱的第二个面，顶部的设定：

.stage div:nth-child(2) {
   width: 110px;
   height: 50px;
   left: 25px;
   top: 0;
   transform: skewX(-45deg);
}

瞧，机箱的顶部高度50px，正面自然要对应下移50px，这样才能衔接。顶部的CSS盒子，我们用了transform的变形函数 skewX(角度)，让它向右边扭曲拉伸，以便配合第三块面板的出场（实际上是要留出3d空间给下一个面板）：

.stage div:nth-child(3) {
   width: 50px; 
   height: 250px;
   left: 110px;
   top: 25px;
   transform: skewY(-45deg);
}

侧面的面板用的扭曲函数与顶部的 skewX(角度) 不同，是 skewY(角度)，因为它不是水平放置的，它的扭曲轴当然不能是X轴，而是Y轴。

回头看看各个面板的尺寸，它们的尺寸不尽相同，它们的定位也不一样，但所有这些数值上的变化其实是有规律的，是根据不同位置而做的精准设定，与正面面板的原始尺寸和顶部面板的高度都建立着倍数关系。

新知识点：

transform: skew(deg1, deg2)

倾斜函数，也称扭曲函数。作用是令对象倾斜，需要xy坐标系的两个参数，单位为deg。仅需某个方向倾斜，可用 skewX 和 skewY，也可写成 skew(15deg,0)和skew(0,15deg)。

马黑黑

1

2

3

马黑黑

二楼代码分享：

1. <style>
   
2. .stage {
   
3.         margin: 50px auto 0;
   
4.         width: 250px;
   
5.         height: 250px;
   
6.         transform-style: preserve-3d;
   
7.         perspective: 1000px;
   
8. }
   
9. .stage div {
   
10.         position: absolute;
    
11.         font: 1.5em / 2em Arial;
    
12.         text-align: center;
    
13.         border: 1px solid #aaa;
    
14.         background: rgba(0,0,0,.6);
    
15. }
    
16. .stage div:nth-child(1) {
    
17.         width: 110px;
    
18.         height: 250px;
    
19.         left: 0;
    
20.         top: 50px;
    
21. }
    
22. .stage div:nth-child(2) {
    
23.         width: 110px;
    
24.         height: 50px;
    
25.         left: 25px;
    
26.         top: 0;
    
27.         transform: skewX(-45deg);
    
28. }
    
29. .stage div:nth-child(3) {
    
30.         width: 50px;
    
31.         height: 250px;
    
32.         left: 110px;
    
33.         top: 25px;
    
34.         transform: skewY(-45deg);
    
35. }
    
36. </style>
    
37. 
    
38. <div class="stage">
    
39.         <div>1</div>
    
40.         <div>2</div>
    
41.         <div>3</div>
    
42. </div>

复制代码

梦油

黑黑朋友早晨好！你真是一位难得的人才啊。

马黑黑

梦油 发表于 2022-4-9 09:44
黑黑朋友早晨好！你真是一位难得的人才啊。

早上好

梦油

马黑黑 发表于 2022-4-9 09:46
早上好

俺啥时候能把你的本事学来啊！

马黑黑

梦油 发表于 2022-4-9 10:20
俺啥时候能把你的本事学来啊！

因人而异，有人很快，有人慢一些，有人怎么都学不会

梦油

马黑黑 发表于 2022-4-9 10:20
因人而异，有人很快，有人慢一些，有人怎么都学不会

是的，黑黑朋友。俺学起来就很难很难。

马黑黑

梦油 发表于 2022-4-9 10:40
是的，黑黑朋友。俺学起来就很难很难。

学能学的

梦油

马黑黑 发表于 2022-4-9 12:05
学能学的

呵呵，俺还是欣赏你的精彩作品吧

马黑黑

梦油 发表于 2022-4-9 13:14
呵呵，俺还是欣赏你的精彩作品吧

红影

这个扭曲不熟悉，比如100*50的盒子扭曲后，高度是不是变低了？若高度不变，那应该是类似倾斜拉伸。
几个子元素的长宽设定能理解，但移位数据不是很理解，应该和这个高度值没理解有关。

红影

扭曲是从哪一点为基点的？扭曲45度后为什么left要移动25，这个是怎么算出来的？

红影

看图示，貌似各面的数字也跟着扭曲了一样的角度呢，有意思

加林森

来学习。感觉很有立体感的。

马黑黑

红影 发表于 2022-4-9 14:11
这个扭曲不熟悉，比如100*50的盒子扭曲后，高度是不是变低了？若高度不变，那应该是类似倾斜拉伸。
几个子 ...

skew、skewX、skewY就是倾斜，其实是有规则的扭曲。倾斜后发生的几何变化依据倾斜角度而变化，这些是有规律的，可以通过数学方法计算。一个面45度的倾斜会产生等腰三角形，本例之所以用45deg就是为了省去基于三角函数的计算，容易确定各个面板的值，细细尝试、研究你能够体会的。

马黑黑

加林森 发表于 2022-4-9 16:22
来学习。感觉很有立体感的。

这个就是立体的，缺个景深而已

加林森

马黑黑 发表于 2022-4-10 10:53
这个就是立体的，缺个景深而已

嗯嗯。明白的。

马黑黑

加林森 发表于 2022-4-10 11:08
嗯嗯。明白的。

实际上也设计了景深，但它的空间不够，可以放在更上一层来做景深

加林森

马黑黑 发表于 2022-4-10 11:20
实际上也设计了景深，但它的空间不够，可以放在更上一层来做景深

嗯嗯，我等着看你做出来。