CSS3旋转、放大与移动效果

旋转的标题动画、放大的图片按钮、滑动入场的卡片效果，CSS3 的transform属性真是前端开发里的万金油。

旋转用rotate()，想转多少度自己定；放大靠scale()，可以 X 轴 Y 轴一起放也能分开来调；移动直接上translate()，想往哪儿挪就往哪儿挪。

几个属性还能叠着用，一行代码，视觉效果立马丰富不少，比如：

transform: rotate(30deg) scale(1.2) translate(40px, 20px);

平时做卡片过渡、hover 动画、弹窗动效这些场景都蛮常用，响应也快，兼容性也还不错。就是老浏览器记得加前缀，-webkit-什么的。

如果你还没上手过，下面这几个案例可以先练起来，实战效果都挺不错：

• 纯 css3 实现旋转放大效果
• CSS3 鼠标经过图片旋转放大代码
• css3 实现标签元素的移动旋转缩放
• css3 旋转按钮
• jquery 加 css3 旋转按钮

，如果你想让页面动起来但又不想搞太复杂，CSS3 的 transform真的是个性价比高的选择。