倾斜与矩阵变换
使用 skew() 创建对角变形，并使用 matrix() 应用完整的变换矩阵。
倾斜与矩阵变换 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
skew() 变换
skew() 会沿一个或两个轴倾斜元素，使块级元素产生倾斜或类似斜体的变形。
<div class="diagonal-section">Section</div>
<span class="italic-badge">Badge</span>skewX() 和 skewY()
分别沿各个轴应用倾斜：
<div class="banner">Slanted background</div>抵消子元素的倾斜
容器发生倾斜时，其子元素也会随之倾斜。请对子元素应用反向倾斜，使其保持正立：
<div class="container"><p>Child text stays upright</p></div>matrix() 变换
matrix(a, b, c, d, tx, ty) 函数是二维变换底层的数学表示。它将平移、旋转、缩放和倾斜组合为一个矩阵运算。
<div class="element">Matrix transform</div>使用 matrix3d() 实现 3D
matrix3d() 扩展为 16 个值，从而实现对完整 3D 仿射变换的控制。复杂的 3D 效果通常由 JavaScript 生成此函数。
实用倾斜：对角线分区
一种常见的设计模式——倾斜的分区背景：
<div class="section-diagonal"><p>Diagonal background section</p></div>使用倾斜添加用户界面装饰
倾斜可以为徽章、缎带装饰和高亮文本增添动态视觉效果：
<span class="badge"><span>NEW</span></span>使用透视创建 3D 环境
3D 变换要求父元素提供透视环境。perspective 设置观察者到 z=0 平面的距离。
<div class="scene"><div class="card">Card</div></div>变换函数的顺序
组合声明中变换函数的顺序很重要。rotate then translate 与 translate then rotate 的结果不同：
<div class="scene-row">
<span class="order-rotate-first">A</span>
<span class="order-translate-first">B</span>
</div>为倾斜添加动画
倾斜可以通过过渡实现滑块和卡片翻转效果。请将它与其他变换组合，以实现自然的移动效果：
<div class="card demo-active">Card</div>快速检查
某个元素应用了 transform: skewX(-15deg)。它的文本子元素会发生什么变化？
回顾
skewX/Y() 可以创建倾斜变形，用于装饰性的分区分隔和动态的用户界面装饰。请对子元素应用反向倾斜，使其内容保持正立。matrix() 是组合所有二维变换的底层数学表示。链接的变换函数的顺序会显著影响最终结果。
常见问题解答
「倾斜与矩阵变换」课时是免费的吗？
是的 — 「倾斜与矩阵变换」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「倾斜与矩阵变换」这节课中我会学到什么？
使用 skew() 创建对角变形，并使用 matrix() 应用完整的变换矩阵。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「倾斜与矩阵变换」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。