css3 动画详解

transform

CSStransform属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

来个例子记录一下

正常的div
css3 动画详解
 

1、matrix()

css3 动画详解

这些值表示以下函数:

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

 
css
.tf1{
     transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
    }

html
 <div class="tf"> Transformed </div>

css3 动画详解

2、translate()

CSS 属性 translate 允许你单独声明平移变换,并独立于 transform 属性。这在一些典型的用户界面上更好用,而且这样就无需在 transform 中声明该函数并记住转换函数的确切顺序了。

css3 动画详解

之前

css3 动画详解

 

3、scale()

 

css3 动画详解

 

css3 动画详解

 

变化之前

css3 动画详解

变化之后

css3 动画详解

 

4、rotate()

css3 动画详解

 

css3 动画详解

5、skew()

css3 动画详解

css3 动画详解

css3 动画详解

 

6、

 

 

 

css3 动画详解

上一篇:js中indexOf()和search()的区别


下一篇:MySQL学习笔记_1_MySQL数据库管理系统概述