css3变换属性 |bootstrap core css

/* 2D变换函数 */
transform: translate(x, y);  // 平移
transform: rotate(angle);  // 旋转
transform: scale(x, y);   // 缩放
transform: skew(x-angle, y-angle);   // 倾斜
/* 3D变换函数 */
transform: translate3d(x, y, z);   // 3D平移
transform: rotate3d(x, y, z, angle);  // 3D旋转
transform: scale3d(x, y, z);  // 3D缩放
transform: perspective(n);  // 设置透视图

Transform属性不仅可以单独使用，还可以与其他属性结合使用，实现更多样化的效果。下面介绍两个常用的属性。

/* 组合效果函数 */
transform: translate(x, y) rotate(angle) scale(x, y);
/* 过渡效果函数 */
transition: transform 0.5s ease-in-out;  // 当transform属性发生变化时，以ease-in-out速度平滑过渡

感谢css3变换属性，大家可以轻松实现平面图形的各种变化效果，给网页带来更生动的视觉体验。