CSS 变换与 3D
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
CSS Transform 是创建现代 Web 动效的基础。
通过本 Lab，你将学会：
- translate() 平移元素
- rotate() 旋转元素
- scale() 缩放元素
- 3D 透视与旋转
Intermediate⏱ 25-30 min
Learning Objectives
- 掌握 translate() 平移变换
- 掌握 rotate() 旋转变换
- 掌握 scale() 缩放变换
- 理解 transform-origin 变换原点
- 了解 3D 透视 (perspective) 的使用
Scenario
你正在为一个产品展示页面创建交互卡片，需要添加悬停时的变换效果，让用户体验更生动。
Why Do This
- CSS is fundamentally about constraining layout and visual hierarchy, not memorizing properties.
- Clarify the box model and layout rules first, then add visual polish — less rework that way.
- Writing styles as reusable patterns is more valuable than tweaking a single page.
Hands-on Practice
- Write the layout skeleton first (display/gap/align), then add colors and shadows.
- Extract repeated styles into reusable classes.
- Use validation rules to reverse-engineer the design intent of your current styles.
Common Mistakes
- Adding margin after margin to fix positioning while ignoring layout containers.
- Selectors nested too deep, causing style coupling.
- Only caring about how it looks without considering maintainability.
Deliverable
A reusable component style template (layout rules + visual rules + naming conventions).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was your main layout decision? Why did you choose it?
What change did you make specifically for maintainability?
What would you prioritize improving next time?
Tags
CSSTransform3D动画