本文档始于2025.12.1 凌晨0:42 周一有早八，写完就睡觉啦

Transform 与 Transition

1.核心概念

变换和过渡是现代Web设计和编程中的核心，
它们分别用于实现元素的平滑动画效果和位置、大小、形状和方向的调整。
过渡效果允许元素在不同状态（如hover、active）切换时，
属性值通过动画方式渐变(transition)，而非瞬间变化。
变换效果则允许对元素进行旋转、缩放、倾斜和位移等操作，
而不影响元素在文档流中的位置，也不会触发重排（Reflow）
而且因为是实时变换，使用GPU运算，所以性能更高。

2.解决了什么问题

避免了网页的反复重算和重排，浏览起来更加顺畅
网页中的一些元素能更加自然和流畅的变化，从而提升用户的交互体验
结合变换与贵都，开发者可以在性能更高的情况下创建出
更加复杂的动态和网页效果：旋转 缩放 移动

3.代码示例

transition: all 0.5s ease-in-out;
/* [要过渡的属性] [持续时间] [速度曲线] */

transform:scale() rotate()

/* 核心代码：将变换原点设置为左上角 (0% 0%) */
transform-origin: bottom right;

/* 核心代码：设置透视距离。请尝试注释掉这一行，观察区别 */
perspective: 800px;

/* 重要代码，元素背面朝向观察者时，它不可见 */
backface-visibility: hidden;

其余代码请查看../../study_by_myself/transform

4.注意事项/常见误区

注意transition的简写写法
现代浏览器无需加-webkit-等私有前缀
将:hover效果应用在父容器上最佳，再使用后代选择器控制子元素
变换原点很重要也很强大
3d变换一定要在父容器设置perspective
注意backface-visibility属性的设置，不然无法实现翻转显示两个不同卡片的效果
记得把背面的卡片设置transform: rotateX(180deg);

5.相关链接

MDN文档 transform
MDN文档 transition
菜鸟教程 CSS3 transform 属性
菜鸟教程 CSS3 transition 属性

6.本次学习总结

本来是准备要睡觉的，想着就学十五分钟就睡，结果一不注意就一个小时给全学完了，很简单也很强大，我很喜欢
这次也使用了ai+自己记笔记的方式学习，很不错啊，要坚定不移的走自己的学习道路，不要被其他人干扰
当然之后写小东西的时候还是要经常翻文档来加深记忆的，加油！