| è¯æ³•é¡¹ç›® | 说明 |
|---|---|
| åˆå§‹å€¼ | none |
| 适用于 | å—å…ƒç´ å’Œè¡Œå†…å…ƒç´ |
| å¯å¦ç»§æ‰¿ | å¦ |
| å•ä½ | deg(角度值) |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
skew()å‡½æ•°èƒ½å¤Ÿè®©å…ƒç´ å€¾æ–œæ˜¾ç¤ºã€‚
skew(<angle> [, <angle>]);包å«ä¸¤ä¸ªå‚数值，分别表示Xè½´å’ŒY轴倾斜的角度，如果第二个å‚数为空，则默认为0，å‚数为负表示å‘相åæ–¹å‘倾斜。
skewX(<angle>);表示åªåœ¨Xè½´(水平方å‘)倾斜。
skewY(<angle>);表示åªåœ¨Yè½´(åž‚ç›´æ–¹å‘)倾斜。
.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);
}
<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+ |