4)transform: skew() 倾斜
-
transform: skew(x,y) 沿着x轴和y轴倾斜
-
transform: skewX(x) 沿着x轴倾斜
-
transform: skewY(y) 沿着y轴倾斜
单位deg(角度) 正值,向左上角和右下角倾斜;负值,向右上角和左下角倾斜
为一个值的时候,只沿着水平方向倾斜
/* 为一个值的时候,只沿着水平方向位移 */ .box1:hover { transform: skew(45deg); } /* skew(30deg,45deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 45 度 */ .box2:hover { background-color: tomato; transform: skew(30deg, 45deg); } .box3:hover { transform: skewX(-45deg); } .box4:hover { transform: skewY(45deg); } .box5:hover { transform: skewY(-45deg); }