告别“盘古之白”： CSS text-autospace 与中文排版的圣杯时刻
分享一下前些天写的一篇文章《告别“盘古之白”：CSS text-autospace 与中文排版的圣杯时刻》。内容就不 copy 到这里了。
结论：如果你是中文网站或内容的 Web 开发者，建议添加一行 CSS text-autospace: normal; 可以改进用户的阅读体验。
你好，我是 Silvana，一名前端开发。
这里记录我写过的代码、做过的项目，以及一些真实想法。
最近捣鼓了个有意思的小效果 —— 纯 CSS 实现的 3D 等距立方体，鼠标在页面上移动时，立方体还能跟着转动，视觉上既有层次感又不复杂。先放个效果动图直观感受下👇
一、先搭 HTML 骨架：简单到只有一个 “盒子”
整个效果的 HTML 结构特别直观，核心就是一个承载 3D 效果的box容器，里面嵌套了立方体的四个侧面，每个侧面放对应的文字内容就行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- 适配移动端，保证小屏也能正常显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS创意等距设计</title>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 3D立方体的外层容器，所有3D变换都基于这个盒子 -->
<div id="box">
<!-- 立方体的侧面容器，包裹四个不同角度的侧面 -->
<div>
<!-- 第一个侧面：旋转0度，对应立方体正面 -->
<span>
<div class="container">
<div class="side">
<h2>CSS</h2>
<h3>Isometric</h3>
<h4>Design</h4>
</div>
</div>
</span>
<!-- 第二个侧面：旋转90度，对应立方体右侧面 -->
<span>
<div class="container">
<div class="side">
<h2>CSS</h2>
<h3>Isometric</h3>
<h4>Design</h4>
</div>
</div>
</span>
<!-- 第三个侧面：旋转180度，对应立方体背面 -->
<span>
<div class="container">
<div class="side">
<h2>CSS</h2>
<h3>Isometric</h3>
<h4>Design</h4>
</div>
</div>
</span>
<!-- 第四个侧面：旋转270度，对应立方体左侧面 -->
<span>
<div class="container">
<div class="side">
<h2>CSS</h2>
<h3>Isometric</h3>
<h4>Design</h4>
</div>
</div>
</span>
</div>
</div>
<!-- 鼠标交互的JS代码 -->
<script>
</script>
</body>
</html>二、CSS 样式：调对 3D 变换才有质感
这个效果的核心全在 CSS 里，尤其是transform-style: preserve-3d（保留 3D 空间）、rotateX/rotateY（3D 旋转）和translate3d（3D 位移），我把关键样式拆出来，每一步都标了注释，一看就懂。
/* 全局重置：清除默认边距，盒模型设为border-box（宽高包含边框/内边距） */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面主体：居中显示，背景色设为浅蓝，最小高度占满屏幕 */
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #80c7ff;
}
/* 3D立方体外层容器：开启3D空间，设置宽高 */
#box {
position: relative;
width: 260px;
height: 340px;
transform-style: preserve-3d; /* 关键：保留子元素的3D变换效果 */
}
/* 立方体的“顶面”：通过rotateX旋转90度，模拟3D顶面，加模糊增加层次感 */
#box::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 260px;
height: 260px;
background: #fff;
transform: rotateX(90deg) translateZ(130px); /* 旋转+位移，定位到立方体顶部 */
filter: blur(4px); /* 轻微模糊，模拟光影效果 */
}
/* 立方体的“底面阴影”：同理旋转，加半透明黑色模拟阴影 */
#box::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 260px;
height: 260px;
background: rgba(0,0,0,0.15);
transform: rotateX(90deg) translateZ(-260px); /* 位移到立方体底部，模拟阴影 */
}
/* 立方体侧面的父容器：继承3D空间属性 */
#box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
/* 每个侧面的基础样式：居中显示内容，继承3D空间 */
#box div span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
}
/* 第一个侧面：旋转0度，作为立方体正面 */
#box div span:nth-child(1){
transform: rotateY(0deg) translate3d(0,0,130px); /* 沿Y轴旋转0度，向Z轴位移130px（立方体边长的一半） */
background: #f1f1f1;
}
/* 第二个侧面：旋转90度，作为立方体右侧面 */
#box div span:nth-child(2){
transform: rotateY(90deg) translate3d(0,0,130px);
background: #f8f8f8;
}
/* 第三个侧面：旋转180度，作为立方体背面 */
#box div span:nth-child(3){
transform: rotateY(180deg) translate3d(0,0,130px);
background: #ededed;
}
/* 第四个侧面：旋转270度，作为立方体左侧面 */
#box div span:nth-child(4){
transform: rotateY(270deg) translate3d(0,0,130px);
background: #f7f7f7;
}
/* 文字容器：居中对齐 */
#box div span .container {
text-align: center;
}
#box div span .container .side{
display: flex;
justify-content: center;
align-items: center;
}
/* 文字样式：垂直排版（writing-mode: vertical-lr），增强3D立方体的视觉效果 */
#box div span .container .side h2{
font-size: 5em;
writing-mode: vertical-lr; /* 文字垂直排列 */
text-orientation: upright; /* 文字直立显示 */
font-weight: 700;
line-height: 1.2em;
color: #0e2f56;
}
#box div span .container .side h3{
font-size: 2.7em;
text-transform: uppercase; /* 字母大写 */
writing-mode: vertical-lr;
color: #fff;
letter-spacing: .12em;
background: #0e2f56;
padding-top: 20px;
padding-bottom: 10px;
font-weight: 300;
}
#box div span .container .side h4{
font-size: 2.2em;
writing-mode: vertical-lr;
text-orientation: upright;
text-transform: uppercase;
line-height: 2em;
color: #0e2f56;
}三、几行 JS 搞定：鼠标交互效果
交互逻辑就监听鼠标移动事件，获取鼠标的 X 轴坐标，动态修改立方体的rotateY值，再固定rotateX为 - 30 度，让立方体保持等距视角，鼠标一动就有反馈，手感刚好。
// 获取3D立方体的DOM元素
var box = document.getElementById("box");
// 监听全局鼠标移动事件
window.onmousemove = function(e) {
// e.clientX：鼠标相对于浏览器可视区的X坐标
// rotateX(-30deg)：固定立方体的上下角度，保持等距视觉
// rotateY(${e.clientX}deg)：让立方体跟着鼠标X轴旋转
box.style.transform = `rotateX(-30deg) rotateY(${e.clientX}deg)`
}写着写着就到了结尾，祝您今晚有个好梦（代码少报错一点）。
本文由mdnice多平台发布
![[油猴脚本] 原生 CSS 实现所有网页添加盘古之白1](https://xiaohack.oss-cn-zhangjiakou.aliyuncs.com/typecho/images/2026/01/06/20260106184327_695ce74f63bd4.jpeg!mark)
![[油猴脚本] 原生 CSS 实现所有网页添加盘古之白2](https://xiaohack.oss-cn-zhangjiakou.aliyuncs.com/typecho/images/2026/01/06/20260106184330_695ce75215e91.png!mark)
![[油猴脚本] 原生 CSS 实现所有网页添加盘古之白3](https://xiaohack.oss-cn-zhangjiakou.aliyuncs.com/typecho/images/2026/01/06/20260106184333_695ce755be55e.png!mark)
