skew() [倾斜]
语法
transform:skew(<angle> [,<angle>]);
| 语法项目 | 说明 |
|---|---|
| 初始值 | none |
| 适用于 | 块元素和行内元素 |
| 可否继承 | 否 |
| 单位 | deg(角度值) |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
说明
skew()函数能够让元素倾斜显示。
取值
skew(<angle> [, <angle>]);包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
实例代码
CSS
.skew_1{
-webkit-transform:skew(45deg,20deg);
-moz-transform:skew(45deg,20deg);
position:absolute;
left:10px;
top:10px;
background:#4d6ea6;
}
.skew_2{
-webkit-transform:skew(-45deg,-20deg);
-moz-transform:skew(-45deg,-20deg);
position:absolute;
left:150px;
top:100px;
background:#4d6ea6;
}
.skew_3{
-webkit-transition:1s ease all;
-moz-transition:1s ease all;
position:absolute;
left:250px;
top:150px;
background:#b9f9cb;
}
.skew_3:hover{
-webkit-transform:skew(45deg,45deg);
-moz-transform:skew(45eg,45deg);
}HTML
运行一下 »<div class="demo_box skew_1">X轴倾斜45度，Y轴倾斜20度</div> <div class="demo_box skew_2">X轴倾斜-45度，Y轴倾斜-20度</div> <div class="demo_box skew_3">鼠标经过X轴倾斜45度，Y轴倾斜45度</div>
兼容性
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |