文章目录
  1. 1. transform
    1. 1.1. rotate
    2. 1.2. scale
    3. 1.3. translate
    4. 1.4. skew
    5. 1.5. matrix
  2. 2. transform-origin
  3. 3. 参考

CSS3 制作动画常用的3个属性:

  1. transform 变形:CSS3 2D 变形、CSS3 3D 变形 【今天讲解 2D 变形】
  2. transition 过渡
  3. animation 动画

transform

transform:对元素进行 2D 或 3D 变形,包括旋转 rotate、缩放 scale、移动 translate、扭曲 skew 和矩阵变形 matrix
语法:
transform: rotate | scale | skew | translate | matrix | none;
当对一个元素进行多个属性操作时,用空格隔开。

rotate

transform: rotate(30deg); 正数-顺时针,负数-逆时针,2D

scale

transform: scale(x,y) X轴和Y轴同时缩放,2D,若y未指定 则和x值一样
transform: scaleX(x) 仅X轴缩放,2D
transform: scaleY(y) 仅Y轴缩放,2D

translate

transform: translate(x,y) X轴和Y轴同时移动,2D,若y未指定 则0
transform: translateX(x) 仅X轴移动,2D
transform: translateY(y) 仅Y轴移动,2D

skew

skew 扭曲|倾斜|斜切
transform: skew(x,y) X轴和Y轴同时扭曲(同时按照一定角度进行扭曲变形),若y未指定 则0deg
transform: skewX(x) 仅X轴扭曲变形
transform: skewY(y) 仅Y轴扭曲变形

matrix

transform: matrix(a,b,c,d,e,f); 应用一个[a,b,c,d,e,f]变换矩阵,2D

transform-origin

已上5个变形都以元素的基点为参照系
transform-origin 可定义元素的基点,默认是元素的中心点

水平方向取值 left center right 即 0% 50% 100%
垂直方向取值 top center bottom 即 0% 50% 100%
若只有一个值 则表示垂直方向 0

参考

w3cplus:http://www.w3cplus.com/content/css3-transform/
w3school:http://www.w3school.com.cn/css3/css3_2dtransform.asp

前缀
-webkit- chrome safari
-moz- Mozilla ff3.5+
-ms- ie9+
-o- opera

文章目录
  1. 1. transform
    1. 1.1. rotate
    2. 1.2. scale
    3. 1.3. translate
    4. 1.4. skew
    5. 1.5. matrix
  2. 2. transform-origin
  3. 3. 参考