变形--扭曲 skew()
2015-10-23 08:21
197 查看
变形--扭曲 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); }
演示结果
相关文章推荐
- 第6周项目4--数制转换
- 第八周项目(1):建立串的算法库
- 2015-10-23 【项目1 - 建立顺序串的算法库】
- 第七周项目4--队列数组
- 第七周项目2-建立链对算法库
- 【C/C++学院】0819-/类的成员函数与const-mutable /构造与析构/拷贝构造deletedefault以及深浅拷贝/静态成员函数成员变量类在内存的存储默认参数/友元类以及友元函数
- 老翟书摘:《设计心理学》
- 第七周项目二-建立联队算法库
- 第8周 项目2 - 建立链串的算法库
- 第六周项目 数制转换
- 第六周项目2-建立链栈算法库
- 第7周 项目6—停车场模拟
- Leetcode NO.246 Strobogrammatic Number
- 第六周项目 建立链栈算法库
- 第八周 项目3 顺序串算法
- Youre helping them with your energy and your money and your work, and they use t
- chrome无法连接到代理服务器,IE也上不了,但是QQ可以登陆,其他软件可以用的解决方法
- 变形--旋转 rotate()
- 队列数组
- 第6周 项目3-括号的匹配