首页 关于上品 成功案例 网站建设 电商设计 新闻中心 联系方式
QQ联系
电话联系
手机联系
QQ联系
电话联系
手机联系

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

发布时间:2020-06-30 17:24
发布者:admin

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

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

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

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

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

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

该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 中将转换定义为值并在第二个状态中定义转换非常重要。