css中形变 |css如何设置优先级

/* 旋转 */
transform: rotate(30deg); /* 顺时针旋转30度 */
transform: rotate(-45deg); /* 逆时针旋转45度 */
/* 缩放 */
transform: scale(2); /* 放大2倍 */
transform: scale(0.5); /* 缩小一半 */
transform: scaleX(2); /* 水平放大2倍 */
transform: scaleY(0.5); /* 垂直缩小一半 */
/* 平移 */
transform: translateX(50px); /* 水平向右平移50像素 */
transform: translateY(-20px); /* 垂直向上平移20像素 */
transform: translate(50px, -20px); /* 同时进行水平和垂直平移 */
/* 倾斜 */
transform: skewX(45deg); /* 水平倾斜45度 */
transform: skewY(-30deg); /* 垂直倾斜30度 */
transform: skew(45deg, -30deg); /* 同时进行水平和垂直倾斜 */

使用形变可以为网页增加更多的动态效果，例如让图片旋转显示更多细节、缩放元素凸显重点、平移突出设计元素等。希望大家在设计中能发挥创造力，发掘更多形变的可能性。