温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么使用transform

发布时间:2021-03-05 14:15:57 来源:亿速云 阅读:316 作者:小新 栏目:开发技术

小编给大家分享一下怎么使用transform,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

  transform是css3的新特性之一。有了它可以boxmodule变的更真实,这篇文章将全面介绍关于transform的使用。

  transform的作用

  transform可以让元素应用2D或3D转换。该属性允许我们对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。这些属性定义上都从属于transform,因此把它们直接作为transform的value来表达。

  transform的兼容写法

  当然使用css3的实现一般都不会兼容低版面的IE,这里整理其他浏览器的兼容写法如下:

  div
  {
  transform:rotate(7deg);
  -ms-transform:rotate(7deg);/*IE9*/
  -moz-transform:rotate(7deg);/*Firefox*/
  -webkit-transform:rotate(7deg);/*Safari和Chrome*/
  -o-transform:rotate(7deg);/*Opera*/
  }

  说明:InternetExplorer9支持替代的-ms-transform属性(仅适用于2D转换)。Safari和Chrome支持替代的-webkit-transform属性(3D和2D转换)。Opera只支持2D转换。

  transform语法

  transform:none|transform-functions;

  none:表示不进么变换;表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一个元素进行transform的多种属性操作,例如rotate、scale、translate三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

  transform-functions取值:transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素,他有几个属性值参数:rotate;translate;scale;skew;matrix。

看完了这篇文章,相信你对“怎么使用transform”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI