CSS3新增样式大解析:[7]skew之元素变形

CSS3中添加的transform是对元素进行变化操作的,包括位移,旋转,放大,变形等等。今天我就跟大家讲讲Skew(变形/倾斜)的操作。这里我的代码均是采用标准的css3规范书写,大家使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

操作方法

  • 01

    skew属性是个比较少用到的属性,至少我用的比较少。 用的好的话会让你的网页烨烨生辉,用不好的话,则是一大败笔。

  • 02

    现在就具体的介绍skew的用法: 语法:transform:skew(<angle> [,<angle>]); 包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。 skewX(<angle>);表示只在X轴(水平方向)倾斜。 skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

  • 03

    先放示例,效果如图:

  • 04

    现在我们来看参数为一个的情况: transform:skew(45deg); 它等同于transform:skewX(45deg); 可以看到demo标签向左倾斜45度,产生变形。 之所以会产生变形的,这是因为我给元素限定了高度为300px,所以只要倾斜的角度不为180°的倍数,他都会保持着300的高度,同时为了保持倾斜,只能拉长本身。(围绕X轴倾斜,保持高度;围绕Y轴倾斜,保留宽度。) 若倾斜解读为180的倍数,元素将不可见。

  • 05

    参数值为一个的第二种情况: transform:skewX(45deg);【这个步骤就不说了,上面以提到】 transform:skewY(45deg); 效果如下图

  • 06

    再看看参数为2个的情况: transform:skew(45deg,45deg); 此时元素将不可见,但实际上它应当在我画的箭头处。 其实根据步骤4和5可以发现,当Y轴倾斜45度后,元素有了一个45°的锐角,而此时又向X轴倾斜,于是这个锐角正好被压缩为0;于是形成了一个类似180°倍数的角。

  • 07

    通过修改X轴的倾斜度数为44度,可以发现元素还是会露出一部分的,跟我上面箭头画的位置存在疑点偏移。

  • 08

    说明:目前skew无Z轴的倾斜,说不定以后会又该属性。

(0)

相关推荐

  • CSS3新增样式大解析:[6]rotate之旋转-初级

    CSS3中添加的transform是对元素进行变化操作的,包括位移,旋转,放大,变形等等.今天我就跟大家讲讲Rotate(旋转)的操作.这里我的代码均是采用标准的css3规范书写,大家使用的时候为了兼 ...

  • 着迷乱斗西游wiki新增经文-大解析

    马上就要迎来新的经文了,让小编提前来为大家解析一下,新增的经文到底有何用处.可是,小编不能忍啊,官网竟然让我们猜每个经文的名字和哪个效果对应,小编也是醉了.这怎么猜啊. 操作方法 01 A:己方英雄技 ...

  • 怪物世界赚钱攻略大解析

    如何在怪物世界中赚取第一桶金?其实和在淘宝网上开店差不多.最重要的是两点:第一必须进入角色,理解并体会其他要交易的玩家,跟其说任何话前都先站在对方的角度考虑一下:第二重视信誉问题,玩家这次在你这里购买 ...

  • 用友U8操作教程:[23]新增项目大类

    本系列将以一个单位的经济业务详细介绍用友U8 V10.1软件的操作步骤.涉及到的板块有系统管理,档案设置,总账系统,薪资管理系统,固定资产系统,应收款管理系统,应付款管理系统,UFO报表系统等. 本篇 ...

  • 动漫卡牌手游进击的巨人游戏奥义大解析

    动漫卡牌手游进击的巨人游戏奥义大解析 操作方法 01 在去年最火爆的动漫一定是<进击的巨人>,最近正在内测的同名卡牌手游也收到了广泛的关注.今天的文章就来为大家介绍一下这款游戏中的奥义系统 ...

  • iOS8更新了什么?iOS8新增14大功能

    苹果在2014 WWDC开发者大会上发布了全新一代操作系统iOS8.据了解,此次iOS8操作系统虽然和iOS7区别不打,但是苹果注重的是内在,iOS8添加了众多新功能.iOS8正式版已发布了,你是否已 ...

  • 小小帝国兵种大解析 完美攻略

    操作方法 01 小小帝国兵种大解析 完美攻略 各位国王们大家好哇,我们的<小小帝国>在大家的关注下已经越来越兴旺了呢,帝国里的泥瓦匠.铁匠和花圃园丁们日夜赶工希望能把大家的帝国建设的更加美 ...

  • 王者荣耀牛魔技能大解析

    牛魔依靠自身被动所提供的强大防御属性,加上自身天生血量的优势,使得他在王者荣耀里面是一个很强势的坦克英雄.利用自己技能的减速等效果,牵制敌人,给队友争取输出空间.究竟什么样的技能让牛魔如此强势呢?接下 ...

  • 王者荣耀刘邦技能大解析

    在最近一次的改版中,加强了刘邦的控制能力,降低了刘邦的操作难度,刘邦的输出能力也是有所加强的.这样的刘邦吸引了很多的玩家,使得刘邦成为王者峡谷里面一个很受欢迎的英雄.接下来,就让小编给大家深度解析一下 ...