transform动画代码

transform动画是CSS3中比较常见的动画类型之一，可以通过对元素的位置、大小、旋转、倾斜等属性进行变换来完成动画效果。

以下是一个简单的transform动画代码示例：

.box {
   /* 设置初始状态 */
   transform: translateX(0) scale(1) rotate(0);
   transition: transform 0.5s ease-in-out;
}
.box:hover {
   /* 设置触发动画的结束状态 */
   transform: translateX(100px) scale(1.2) rotate(45deg); 
}

其中，`.box`是需要应用动画效果的元素，初始状态下的transform属性为`translateX(0)`、`scale(1)`和`rotate(0)`，表示元素在x方向上不偏移，大小为原始尺寸，不进行旋转。`transition`属性定义了动画的持续时间、缓动效果等。

当鼠标悬停在`.box`元素上时，动画会被触发，最终状态下的transform属性为`translateX(100px)`、`scale(1.2)`和`rotate(45deg)`，表示元素沿x轴方向平移100像素，大小变为原始尺寸的1.2倍，旋转45度。

此外，CSS3中还可以通过`translateY()`、`translateZ()`、`scaleX()`、`scaleY()`、`scaleZ()`、`rotateX()`、`rotateY()`、`rotateZ()`、`skewX()`和`skewY()`等函数来实现更加复杂的transform变换效果。