当前阅读教程:CSS3教程 > skew() 方法 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: scale() 方法 | 下一篇: CSS3 过渡 |
语法transform:skew(<angle> [,<angle>]); 包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。 n skewX(<angle>);表示只在X轴(水平方向)倾斜。 n skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
实例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>skew() 方法</title> <!--定义内部样式--> <style> div{ width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2{ transform:skew(30deg,20deg);/*skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度*/ -ms-transform:skew(30deg,20deg); /* IE 9 */ -moz-transform:skew(30deg,20deg); /* Firefox */ -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ -o-transform:skew(30deg,20deg); /* Opera */ } </style> </head> <body> <div>你好。这是一个 div 元素。</div> <div id="div2">你好。这是一个 div 元素。</div> </body> </html> 效果图 |
|
上一篇: scale() 方法 | 下一篇: CSS3 过渡 |