css3-----变形（transform）过渡(transtion) 动画(animation)

最新推荐文章于 2025-10-25 11:42:00 发布

原创最新推荐文章于 2025-10-25 11:42:00 发布 · 762 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端知识专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了CSS3中的transform属性，包括旋转rotate、扭曲skew、缩放scale和移动translate等变形效果，以及不同浏览器内核下的书写规则。同时，还讲解了过渡transition的使用方法，包括过渡时间、过渡方式和过渡开始时间的设置。

transform

在css3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

transform在不同浏览器内核下的书写规则

  //Mozilla内核浏览器：firefox3.5+
  -moz-transform: rotate | scale | skew | translate ;
 //Webkit内核浏览器：Safari and Chrome
  -webkit-transform: rotate | scale | skew | translate ;
 //Opera
  -o-transform: rotate | scale | skew | translate ;
 //IE9
  -ms-transform: rotate | scale | skew | translate ;
 //W3C标准
  transform: rotate | scale | skew | translate ;