位置:电子教程 > CSS3教程 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS3基础样式
CSS3 高级样式
当前阅读教程: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>
效果图

小白教程网www.2d5.net

image.png



上一篇: scale() 方法 下一篇: CSS3 过渡
毕业设计网             广告联系QQ:45157718(微信同号)