画个电脑机箱（练手）

马黑黑 发表于 2022-4-9 09:36

本帖最后由马黑黑于 2022-4-9 09:43 编辑 <br /><br /><style>
.postBox { width: 100%; font: normal 1em/1.5em Sans-serif; }
.postBox p { padding: 8px 0 8px 0; }
.postBox pre { font-size: 12px; }

</style>

<div class="postBox">

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

<pre><span style="color: red;">.stage </span>{
   <span style="color: blue;">margin</span>: 50px auto 0;
   <span style="color: blue;">width</span>: 250px;
   <span style="color: blue;">height</span>: 250px;
   <span style="color: blue;">transform-style</span>: preserve-3d;
   <span style="color: blue;">perspective</span>: 1000px;
}</pre>

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

<pre><span style="color: red;">.stage div </span>{
   <span style="color: blue;">position</span>: absolute;
   <span style="color: blue;">font</span>: 1.5em / 2em Arial;
   <span style="color: blue;">text-align</span>: center;
   <span style="color: blue;">border</span>: 1px solid #aaa;
   <span style="color: blue;">background</span>: rgba(0,0,0,.6);
}
</pre>

<p>以上，设定了定位、边框和背景色，以及文本相关的项目（我们会给机箱的各个面写上标识，所以字体方面需要设定一下）。</p>
<p>现在可以开始绘制机箱了。假如机箱就在我们的左前方，我们其实看到的只有机箱的三个面：正面、顶部和机箱的一个侧面。让我们先来画机箱的正面：</p>

<pre><span style="color: red;">.stage <span style="color: blue;">div</span>:nth-child(1) </span>{
   <span style="color: blue;">width</span>: 110px;
   <span style="color: blue;">height</span>: 250px;
   <span style="color: blue;">left</span>: 0;
   <span style="color: blue;">top</span>: 50px;
}</pre>

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

<pre><span style="color: red;">.stage <span style="color: blue;">div</span>:nth-child(2) </span>{
   <span style="color: blue;">width</span>: 110px;
   <span style="color: blue;">height</span>: 50px;
   <span style="color: blue;">left</span>: 25px;
   <span style="color: blue;">top</span>: 0;
   <span style="color: blue;">transform</span>: skewX(-45deg);
}
</pre>

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

<pre><span style="color: red;">.stage <span style="color: blue;">div</span>:nth-child(3) </span>{
   <span style="color: blue;">width</span>: 50px;
   <span style="color: blue;">height</span>: 250px;
   <span style="color: blue;">left</span>: 110px;
   <span style="color: blue;">top</span>: 25px;
   <span style="color: blue;">transform</span>: skewY(-45deg);
}
</pre>

<p>侧面的面板用的扭曲函数与顶部的 skewX(角度) 不同，是 skewY(角度)，因为它不是水平放置的，它的扭曲轴当然不能是X轴，而是Y轴。</p>
<p>回头看看各个面板的尺寸，它们的尺寸不尽相同，它们的定位也不一样，但所有这些数值上的变化其实是有规律的，是根据不同位置而做的精准设定，与正面面板的原始尺寸和顶部面板的高度都建立着倍数关系。</p>
<p>新知识点：</p>
<p>transform: skew(deg1, deg2)</p>
<p>倾斜函数，也称扭曲函数。作用是令对象倾斜，需要xy坐标系的两个参数，单位为deg。仅需某个方向倾斜，可用 skewX 和 skewY，也可写成 skew(15deg,0)和skew(0,15deg)。</p>

</div>

马黑黑 发表于 2022-4-9 09:43

马黑黑 发表于 2022-4-9 09:44

二楼代码分享：
<style>
.stage {
margin: 50px auto 0;
width: 250px;
height: 250px;
transform-style: preserve-3d;
perspective: 1000px;
}
.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;
}
.stage div:nth-child(2) {
width: 110px;
height: 50px;
left: 25px;
top: 0;
transform: skewX(-45deg);
}
.stage div:nth-child(3) {
width: 50px;
height: 250px;
left: 110px;
top: 25px;
transform: skewY(-45deg);
}
</style>

<div class="stage">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

梦油发表于 2022-4-9 09:44

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

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

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

早上好{:4_190:}

梦油发表于 2022-4-9 10:20

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

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

马黑黑 发表于 2022-4-9 10:20

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

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

梦油发表于 2022-4-9 10:40

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

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

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

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

学能学的

梦油发表于 2022-4-9 13:14

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

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

马黑黑 发表于 2022-4-9 13:56

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

{:5_108:}

红影发表于 2022-4-9 14:11

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

红影发表于 2022-4-9 14:15

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

红影发表于 2022-4-9 14:17

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

加林森 发表于 2022-4-9 16:22

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

马黑黑 发表于 2022-4-10 10:53

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

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

马黑黑 发表于 2022-4-10 10:53

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

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

加林森 发表于 2022-4-10 11:08

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

嗯嗯。明白的。

马黑黑 发表于 2022-4-10 11:20

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

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

加林森 发表于 2022-4-10 11:22

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

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

页: [1] 2

花潮论坛's Archiver

画个电脑机箱（练手）