标签让可以用 JS 绘制 3D 图形，但 CSS 一样拥有一套强大的 3D 变换能力。通过 perspectivetransform-style: preserve-3d 和 translateZ 等属性。可以轻松建立出立体感十足的三维场景，而且——这一切都由浏览器的 GPU 硬件加速，性能表现极其流畅。

一、布局基石：盒子模型与视口单位

痛点：很多新手在进入 3D 前会因为二维布局不稳导致“翻转后位置错位”，甚至出现滚动卡顿。先把二维打好基础，后面的三维才不会“漂移”。

块级 vs 行内元素

/* 手动切换显示模式 */
.box {
display: inline;/* 变成行内 */
display: inline-block;/* 行内但可设宽高 */
display: block;/* 变成块级 */
}

再看视口单位，vh / vw

C​SS3 引入了视口单位。让元素尺寸与浏览器窗口大小挂钩：

• 100vh: 视口高度的100%
• 100vw: 视口宽度的100%

痛点：移动端适配时常写死像素导致页面横向滚动或文字被裁切，用视口单位即可“一键适配”。

html。body {
再看height，100vh;/* 撑满整个视口高度 */
width这方面，100vw;/* 撑满整个视口宽度 */
}

二、布局进阶：Flexbox 弹性布局

display: flex 会开启弹性格式化上下文,让子元素在主轴和交叉轴上灵活排列。不过，

基础用法

body {
display: flex;flex-direction: row;/* 主轴方向：行 */
justify-content: center;/* 主轴居中 */
align-items: center;
按理说，/* 横轴居中 */
}

等分布局这方面。flex:

当父容器为 flex 时子元素设置 #flex#  会平分剩余空间**。

.box {
display: flex;}
.item {
flex这方面，1;怎么说呢，/* 每个 item 宽度相等 */
text-align:center;}

This pattern is a typical **four‑equal‑segment navigation bar**,frequently used in mobile UI.

inline‑block 的坑 & 替代方案

.inline-block) 元素之间的空白字符会被渲染为间隙：

• 删除 HTML 中的换行/空格；或
• 改用 Flexbox 完全消除间隙。

三、定位机制：让元素“飞”起来 & 常见痛点剖析

C​SS 定位决定了元素在文档流中的行为：

四、主要实战：纯 CSS 3D 立方体 🚀

 

后

Back 
<