css3价格斜切_CSS3倾斜skew()方法_CSS3教程_绿叶学习网
9.5 倾斜skew()方法
作者(helicopter)
赞(22)
浏览(26434)
说明:原创教程,禁止转载
一、skew()方法
在CSS3中,我们可以使用skew()方法将元素倾斜显示。
skew()方法跟translate()方法、scale()方法一样,也有3种情况:
(1)skewX(x):使元素在水平方向倾斜(X轴倾斜);
(2)skewY(y):使元素在垂直方向倾斜(Y轴倾斜);
(3)skew(x,y):使元素在水平方向和垂直方向同时倾斜(X轴和Y轴同时倾斜);
1、skewX(x)方法
语法:
transform:skewX(x);
说明:
x表示元素在X轴倾斜的度数,单位为deg。
如果度数为正,表示元素沿水平方向(X轴)顺时针倾斜;如果度数为负,表示元素沿水平方向(X轴)逆时针倾斜。
2、skewY(y)方法
语法:
transform:skewY(y);
说明:
y表示元素在Y轴倾斜的度数,单位为deg。
如果度数为正,表示元素沿垂直方向(Y轴)顺时针倾斜;如果度数为负,表示元素沿垂直方向(Y轴)逆时针倾斜。
注意,这里是跟位移translate()方法类似的,也是W3C的奇葩规定。
3、skew(x,y)方法
语法:
transform:skew(x,y);
说明:
第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。
举例:
CSS3倾斜skew()方法
/*设置原始元素样式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:skewX(30deg);
-webkit-transform:skewX(30deg); /*兼容-webkit-引擎浏览器*/
-moz-transform:skewX(30deg);/*兼容-moz-引擎浏览器*/
}
在浏览器预览效果如下:
分析:
对于初学者,可能一时半会看不出skewX()方法的本质原理。其实skewX()方法变形原理是这样的:由于我给元素限定了高度为100px,而skewX()方法是沿着X轴方向倾斜。所以,只要倾斜角度不是180°,元素都会保持100px的高度。同时为了保持倾斜,只能沿着X轴拉长本身。
由此我们可以总结:
(1)skewX()方法会保持高度,沿着X轴倾斜;
(2)skewY()方法会保持宽度,沿着Y轴倾斜;
(3)skew(x,y)方法会先按照skewX()方法倾斜,然后按照skewY()方法倾斜;
transform:skewY(30deg);
-webkit-transform:skewY(30deg); /*兼容-webkit-引擎浏览器*/
-moz-transform:skewY(30deg); /*兼容-moz-引擎浏览器*/
当采用上述代码时,在浏览器预览效果如下:
学过点基本数学的人都知道,位移、旋转和倾斜都不会改变四边形的面积。skew()方法可能比较少用。不过用的好的话,会让你的网页美观动感,但是用得不好的话,则将是一大败笔。
css3价格斜切_CSS3倾斜skew()方法_CSS3教程_绿叶学习网相关推荐
- 未转变者如何创建服务器教程,未转变者(unturned)联机服务器怎么创建_未转变者联机服务器创建方法图文教程_牛游戏网...
未转变者之前小编有讲过联机方法,今天要讲的是未转变者(unturned)联机服务器创建方法,是有区别的,联机是小伙伴和小伙伴联机一起玩,联机服务器是大家都可以来这个服务器玩,但是搭建服务器的账号不能玩 ...
- html伪类选择器结构,子元素伪类选择器 - CSS3 | 绿叶学习网
子元素伪类选择器,指的就是选择某一个元素下的子元素.伪类选择器,相信小伙伴也接触过了,最典型的就是超链接的几个伪类:a:link.a:visited.a:hover.a:active. 在CSS3中, ...
- css3价格斜切_css3 斜切角/斜边的实现方式
设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用border连起来,这样就能显示出该效果了,那么直接使用css呢?下面就整理css做斜边的效果. 1.方案一:利用linear-g ...
- css3价格斜切_CSS秘密花园:斜切角
<CSS Secrets>是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密.是一本CSSer值得一读的一本书,经过一段时间的阅读,我.@南北和@彦子一起将在W3cplu ...
- css3价格斜切_HTML5+CSS3价格表翻转切换动画
书写css代码. .pricing-container { width: 90%; max-width: 1170px; margin: 4em auto; } .pricing-container ...
- html 图片使用scale,缩放:scale() - CSS3 | 绿叶学习网
在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果.缩放,指的是"缩小"和"放大"的意思. 语法: transform: ...
- css 平移到某个位置_平移:translate() - CSS3 | 绿叶学习网
在CSS3中,我们可以使用transform属性的translate()方法来实现元素的平移效果. 语法: transform: translateX(x); /*沿X轴方向平移*/ transfor ...
- python图层合并_图层最新:Python叠加矩形框图层2种方法及效果_爱安网 LoveAn.com
关于"图层"的最新内容 聚合阅读 这篇文章主要介绍了Python叠加矩形框图层2种方法及效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友 ...
- 饥荒服务器不显示管理员,饥荒联机版管理员怎么添加_饥荒联机版管理员介绍与添加方法详解_玩游戏网...
<饥荒>联机版里面的管理员这个概念大家了解吗?我之前也不清楚管理员相关内容,下面笔者就为大家带来了饥荒联机版管理员介绍与添加方法详解,小伙伴们还不了解联机版管理员的下面跟我一起来看看吧. ...
最新文章
- boost::multiprecision模块将 std::numeric_limits 用作 multiprecision.qbk 上的多精度文档片段的示例
- hdu 1023 大数 卡特兰数
- percona mysql.cnf_Percona MySQL5.6 半同步复制
- 小甲鱼 OllyDbg 教程系列 (九) :Delphi 程序逆向特点
- 两条边延长角会有什么变化_《认识角》教学设计
- 空巢青年,“空巢”是选择还是无奈? | 数据告诉你
- Visual Studio 2010添加新项缺失[ADO.NET 实体数据模型]解决方法
- 通达oa 2013 php解密,通达OA 2011-2013 通杀GETSHELL修复补丁
- [原创]浅析汇编之堆栈平衡
- Unicode字符编码标准
- Thanks, Steve Jobs!
- 史上最全《JMeter压力测试教程》——通俗易懂,3天即可学会
- 30用一个例子解释mapping到底是什么
- nvme-cli常用指令
- c# 定时器 每隔几秒执行一次
- 2019最新Android常用开源库总结(附带github链接)
- AutoCAD 2021 for Mac(cad2021)中文版
- 电力电子器件和 电路应用知识点考点总结
- jzoj6377. 【NOIP2019模拟2019.10.05】幽曲[埋骨于弘川]
- 场地测量的方法和程序_(完整版)场地平整施工测量
热门文章
- 如何在SAP Cloud for Customer自定义BO中创建访问控制
- C++添加程序到windows的启动项的代码
- 大数据分析中使用关系型数据库的关键点
- eBay:大数据和人工智能是2017年电商发展关键因素
- java使用HttpClient传输json格式的参数
- Big Data Security Part One: Introducing PacketPig
- Android短信的发送和广播接收者实现短信的监听
- Excel事半功倍的应用
- 《ASCE1885的源码分析》の跨平台互斥对象Mutex封装类
- Python大佬抓取了招聘信息并告诉你哪种Python 程序员最赚钱