[分享]css两种元素的转换

CSS3 提供了两种元素的转换：transform 和 transition，它们的使用可以让页面更加生动有趣，下面我们来详细了解它们的使用。

/* transform */
transform: rotate(45deg); /* 旋转45度 */
transform: scale(0.5); /* 缩放50% */
transform: translate(50px, 100px); /* 平移50px横向，100px纵向 */
transform: skew(30deg, 20deg); /* 倾斜30度横向，20度纵向 */

/* transition */
transition: width 2s; /* 动画宽度变化需要2秒 */
transition: all 0.5s; /* 所有属性变化需要0.5秒 */
transition: background-color 1s ease-out; /* 背景色变化需要1秒，缓动函数为 ease-out */ 

使用 transform 可以实现元素的旋转、缩放、平移、倾斜等变换效果。transition 可以实现元素从一个属性值向另一个属性值的过渡动画，常用于改变元素大小、颜色、位置等属性时使页面更具流畅性。

同时 transform 和 transition 都支持多重属性变换，在一个 transition 中同时定义多个属性的变换效果，同时可以使用 transition-delay 属性来定义动画延迟的时间，这些属性的灵活使用可以让我们实现更多有趣的效果。