37. CSS3变形之扭曲 skew()
扭曲skew()
函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X 轴和Y 轴按照一定的角度倾斜。这与rotate()
函数的旋转不同,rotate()
函数只是旋转,而不会改变元素的形状。skew()
函数不会旋转,而只会改变元素的形状。
Skew()具有三种情况:
1、skew(x,y)
使元素在水平和垂直方向同时扭曲(X 轴和 Y 轴同时按一定的角度值进行扭曲变形);
第一个参数对应 X 轴,第二个参数对应 Y 轴。如果第二个参数未提供,则值为 0,也就是 Y 轴方向上无斜切。
2、skewX(x)仅使元素在水平方向扭曲变形(X 轴扭曲变形);
3、skewY(y)
仅使元素在垂直方向扭曲变形(Y 轴扭曲变形)
示例演示:
通过skew()
函数将长方形变成平行四边形。
HTML 代码:
<div class="wrapper"> <div>我变成平形四边形</div> </div>
CSS 代码:
.wrapper { width: 300px; height: 100px; border: 2px dotted red; margin: 30px auto; } .wrapper div { width: 300px; height: 100px; line-height: 100px; text-align: center; color: #fff; background: orange; -webkit-transform: skew(45deg); -moz-transform:skew(45deg) transform:skew(45deg); }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 37. CSS3变形之扭曲 skew()
码云笔记 » 37. CSS3变形之扭曲 skew()