CSS3中提供了許多有趣的效果，比如常用的旋轉(zhuǎn)、縮放等效果，還有skew傾斜效果。skew旋轉(zhuǎn)效果非常有意思，它可以使元素在水平方向或垂直方向上傾斜一定的角度，從而帶來非常獨特的視覺效果。

使用CSS3的skew效果十分簡單，只需要使用transform: skew()屬性即可。skew效果有兩個參數(shù)，第一個參數(shù)表示水平方向上的傾斜角度，第二個參數(shù)表示垂直方向上的傾斜角度。傾斜角度是以度數(shù)為單位的，可以是正數(shù)也可以是負數(shù)。

/*水平方向上傾斜30度*/
.skew-horizontal{
transform: skew(30deg,0);
}
/*垂直方向上傾斜30度*/
.skew-vertical{
transform: skew(0,30deg);
}

除了可以使用固定的角度值進行傾斜，還可以使用變量進行傾斜。比如可以根據(jù)鼠標(biāo)移動的距離來控制元素的傾斜效果：

.skew-mouse{
transform: skew(var(--mouse-x,0deg),var(--mouse-y,0deg));
}
body{
/*設(shè)置變量*/
--mouse-x: 0deg;
--mouse-y: 0deg;
}
/*監(jiān)聽鼠標(biāo)移動事件*/
document.addEventListener('mousemove',function(event){
//獲取鼠標(biāo)移動距離并進行計算
var mouseX = (event.clientX - window.innerWidth/2) / window.innerWidth * 30;
var mouseY = (event.clientY - window.innerHeight/2) / window.innerHeight * 30;
//將變量的值設(shè)置為計算出的角度值
document.body.style.setProperty('--mouse-x',mouseX+'deg');
document.body.style.setProperty('--mouse-y',mouseY+'deg');
})

使用CSS3的skew效果可以給網(wǎng)頁帶來非常有趣的視覺效果，通過靈活的控制角度值可以實現(xiàn)非常獨特的效果。如果你還沒有使用過CSS3的skew效果，可以趕快試試看吧！