前台开发和网页设计的CSS转换属性

  • 时间:2018-06-23 23:35 作者:爱码农 来源:爱码农 阅读:356
  • 扫一扫,手机访问
摘要:有兴趣理解更多关于前台开发和网页设计的知识吗?请阅读关于CSS转换属性的优秀教程。假如没有CSS转换,转换属性只可以将其应使用到的对象翻转。所以,在现实生活中,这两种选择是一起应使用的。只是变换这个属性拥有的权力:rotate(angle),skew(angle),translate(x,y),sc

有兴趣理解更多关于前台开发和网页设计的知识吗?请阅读关于CSS转换属性的优秀教程。

假如没有CSS转换,转换属性只可以将其应使用到的对象翻转。所以,在现实生活中,这两种选择是一起应使用的。

前台开发和网页设计的CSS转换属性

只是变换

这个属性拥有的权力:

  • rotate(angle),

  • skew(angle),

  • translate(x,y),

  • scale(x,y),

  • matrix(n,n,n,n,n,n).

除了maybematrix之外,所有的值都是很清楚的。

旋转和倾斜选项用角度度数(值能是负数,能输入超过360度)。例如,输入1080deg进行三个完整的旋转。

scale选项只用数字,并且根据给定的宽度和高度的参数定义该对象的添加/减少程度。

所有这些属性接受矩阵(仍可可以不是self-explained)和X和Y有特殊选项增加到语法,在这种情况下,只要要一个参数和属性,在旋转和倾斜的情况下,变得相对于X或者Y轴(例如translateX(),写入scaleY()等)。

矩阵选项能做所有事情(你期望的更少吗?)确切的语法是矩阵(scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY())。即便里面没有旋转选项,它也能旋转。我不可以说更多(由于这是数学……请查看此邮件以获取更多信息。

还能通过在一个转换中定义多个转换组合。

div {

transform: rotate(90deg) scale(2) translateY(-50%) translateX(50%);

}

这一特性最近被使用于的最流行的效果是,主要是旋转导航、社交和其余信息,并使它们垂直。在下面的两个例子中,我们用了transform: rotate(-90deg)属性。

前台开发和网页设计的CSS转换属性

前台开发和网页设计的CSS转换属性

3D变换

2D属性值rotate,translate,scale和matrix具备加入它们与z轴平行的3D值。额外的3D属性是perspective,它定义了3D变换元素的透视图。Perspective用一个值来定义元素距视图的距离。

我相信在了解2D选项之后,所有这些都是不言自明的。

Transition + Transform

该transform属性使用于定义元素的两个状态之间的转换。与transition他们一样,他们成为一对强大的夫妻,正如开头提到的那样。

.box {

...

background-color: #0000FF;

-webkit-transition:background-color 2s, -webkit-transform 2s;

transition:background-color 2s, transform 2s;

}

.box:hover {

background-color: #FFCCCC;

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

这种组合是transform和transition属性最常见的使用法 。记住在第一个状态transform 中将转换定义为值并在第二个状态中定义转换非常重要。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
【系统环境|windows】初识webRTC(2021-03-20 21:23)
手机二维码手机访问领取大礼包
返回顶部