CSS变形和过渡的区别与联系

1 区别

1、变形能够设置对象的中心点；过渡默认是对象的左上角，不能改变。变形（transform）可以使用transform-origin属性进行中心点变换，过渡（transition）不能设置中心点变换。

2、过渡效果是针对元素的属性进行的改变；变形是针对整个元素进行的改变。过渡时可以通过设置transition-property来决定参与过渡的属性，可以将全部属性设置过渡，可以全部属性不设置过渡，也可以只设置自己想参与过渡的几个属性。但是变形不能单设置属性，变形针对的是整个元素。

3、过渡效果可以设定过渡时间、曲线、延迟等；变形不能设置，变形是瞬间完成的变化。过渡就是一个简易的小动画，可以看出改变的过程，通过改变时间、曲线等属性，也会呈现出不同的效果。变形设定好之后会直接呈现出最终效果，是瞬间完成的。

2 联系

1、过渡、变形都不会对其他元素的布局产生影响。

2、两者一般都会设置触发的条件。