变换原点与透视
使用 transform-origin 更改变换的支点，并使用 perspective 增加深度效果。
变换原点与透视 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
transform-origin 默认值
默认情况下，变换会围绕元素的中心点进行：50% 50%。transform-origin 属性可以更改这个支点。
设置 transform-origin
可以接受关键字、百分比或长度。格式：x-axis y-axis z-axis。
<div class="spinning-logo">Logo</div>
<div class="page-fold">Fold</div>
<div class="tooltip">Info</div>使用 transform-origin 进行缩放
从左上角开始缩放（适用于下拉菜单展开动画）：
<div class="dropdown open">Dropdown menu</div>使用 transform-origin 进行旋转
让钟表指针围绕底部旋转：
<div class="clock"><div class="hand"></div></div>perspective 属性
perspective 设置 3D 变换中用户与 z=0 平面之间的距离。较小的值会产生更明显的透视变形，较大的值会产生更 subtle 的深度效果。
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
更改透视的消失点。默认值为中心点（50% 50%）。
<div class="scene"><div class="card">Card</div></div>作为函数使用 perspective
perspective() 也可以作为变换函数应用于元素本身（而不是父元素）。这样会将 3D 环境限制在该元素内。
<div class="card">Card</div>transform-style: preserve-3d
默认情况下，子元素的 3D 变换会被压平为二维。请在父元素上设置 transform-style: preserve-3d，以保持子元素真正的 3D 定位。
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>卡片翻转效果
使用透视和 preserve-3d 实现经典的翻转卡片：
<div class="card-wrapper">
<div class="card"><div class="card-back">Back</div></div>
</div>
<div class="card-wrapper">
<div class="card flipped"><div class="card-back">Back (flipped)</div></div>
</div>backface-visibility
backface-visibility: hidden 会隐藏经过 3D 变换的元素背面。在背面不应透过正面显示的翻转卡片中，这一属性必不可少。
组合透视和原点
一种会响应光标位置的戏剧性 3D 悬停倾斜效果：
<div class="card demo-active">3D Tilt Card</div>快速检查
某个下拉菜单使用 transform: scaleY(0) 隐藏，使用 scaleY(1) 显示。哪个 transform-origin 值可以让它从顶部向下展开？
回顾
transform-origin 会更改变换的支点，旋转和缩放尤其需要注意这一点，例如下拉菜单展开、钟表指针和悬停倾斜。父元素上的 perspective 会创建 3D 深度环境。transform-style: preserve-3d 可以启用嵌套的 3D 元素。backface-visibility: hidden 会在翻转效果中隐藏元素背面。
常见问题解答
「变换原点与透视」课时是免费的吗？
是的 — 「变换原点与透视」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「变换原点与透视」这节课中我会学到什么？
使用 transform-origin 更改变换的支点，并使用 perspective 增加深度效果。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「变换原点与透视」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。