css3 skew的效果 |外部css的图片路径正确写法

使用CSS3的skew效果十分简单，只需要使用transform: skew()属性即可。skew效果有两个参数，第一个参数表示水平方向上的倾斜角度，第二个参数表示垂直方向上的倾斜角度。倾斜角度是以度数为单位的，可以是正数也可以是负数。

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

除了可以使用固定的角度值进行倾斜，还可以使用变量进行倾斜。比如可以根据鼠标移动的距离来控制元素的倾斜效果：

.skew-mouse{
transform: skew(var(--mouse-x,0deg),var(--mouse-y,0deg));
}
body{
/*设置变量*/
--mouse-x: 0deg;
--mouse-y: 0deg;
}
/*监听鼠标移动事件*/
document.addEventListener('mousemove',function(event){
//获取鼠标移动距离并进行计算
var mouseX = (event.clientX - window.innerWidth/2) / window.innerWidth * 30;
var mouseY = (event.clientY - window.innerHeight/2) / window.innerHeight * 30;
//将变量的值设置为计算出的角度值
document.body.style.setProperty('--mouse-x',mouseX+'deg');
document.body.style.setProperty('--mouse-y',mouseY+'deg');
})

使用CSS3的skew效果可以给网页带来非常有趣的视觉效果，通过灵活的控制角度值可以实现非常独特的效果。如果你还没有使用过CSS3的skew效果，可以赶快试试看吧！