CSS3--CSS3转换

CSS3 变形(transform)属性

让元素在一个坐标系统中变形。这个属性包含一系列变形函数,可以移动、旋转和缩放元素

语法
transform : none | <transform-function> [<transform-function>]* ;

默认值
transform : none ;

兼容性

IE12+, Firefox16+, Chrome36+, Safari16+, Opera23+

CSS3 2D转换

旋转rotate

通过指定的角度参数对原元素指定一个2D rotation (2D旋转)

语法

transform: rotate(<angle>);

angle指旋转角度,正数表示顺时针旋转,负数表示逆时针旋转

1
2
3
4
5
6
7
.box{
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);
}

移动translate

根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动

三种情况

  • translateX(x) 仅水平方向移动(X轴移动)
  • translateY(y) 仅垂直方向移动(Y轴移动)
  • translate(x,y) 水平方向和垂直方向同时移动(X轴和Y轴同时移动)

语法

  • transform: translateX(<translation-value>);
  • transform: translateY(<translation-value>);
  • transform: translate(<translation-value>[, <translation-value>]);

translation-value指移动,正数表示向右或向下,负数表示向左或向上

1
2
3
4
5
6
7
8
9
10
11
.box1{
transform: translateX(200px);
}

.box2{
transform: translateY(200px);
}

.box3{
transform: translate(200px,100px);
}

缩放scale

指定对象的2D scale(2D缩放)

三种情况

  • scaleX(x) 仅水平方向缩放(X轴缩放)
  • scaleY(y) 仅垂直方向缩放(Y轴缩放)
  • scale(x,y) 水平方向和垂直方向同时缩放(X轴和Y轴同时缩放)

语法

  • transform: scaleX(<number>);
  • transform: scaleY(<number>);
  • transform: scale(<number>[, <number>]);

number指缩放倍数,缩放原点在中心

1
2
3
4
5
6
7
8
9
10
11
.box1{
transform: scaleX(2);
}

.box2{
transform: scaleY(2);
}

.box3{
transform: scale(2,4);
}

扭曲skew

指定对象的skew transformation(斜切扭曲)

三种情况

  • skewX(x) 仅水平方向扭曲变形(X轴扭曲变形)
  • skewY(y) 仅垂直方向扭曲变形(Y轴扭曲变形)
  • skew(x,y) 水平方向和垂直方向同时扭曲变形(X轴和Y轴同时扭曲变形)

语法

  • transform: skewX(<angle>);
  • transform: skewY(<angle>);
  • transform: skew(<angle>[, <angle>]);

angle指斜切角度

  • X正值逆时针斜切,负值顺时针斜切
  • Y正值顺时针斜切,负值逆时针斜切
1
2
3
4
5
6
7
8
9
10
11
.box1{
transform: skewX(10deg);
}

.box2{
transform: skewY(20deg);
}

.box3{
transform: skew(20deg,40deg);
}

矩阵matrix

以一个含六个值的变换矩阵的形式指定一个2D变换

文章最后有详细记录

语法

  • transform: matrix(a, b, c, d, e, f);

CSS3 3D转换

旋转rotate

旋转rotateX

指定对象在X轴上的旋转角度

语法

transform: rotateX(angle);


旋转rotateY

指定对象在Y轴上的旋转角度

语法

transform: rotateY(angle);


旋转rotateZ

指定对象在Z轴上的旋转角度

语法

transform: rotateZ(angle);


旋转rotate3d

指定对象的3D旋转角度

语法

transform: rotate3d(x,y,z,angle);

参数说明

前3个参数分别表示旋转的方向x,y,z,第4个参数表示旋转的角度,参数不允许省略

移动translate

移动translateZ

指定对象的Z轴位移

语法

transform: translateZ(z);


移动translate3d

指定对象的3D位移

语法

transform: translate3d(x,y,z);

缩放scale

缩放scaleZ

指定对象的Z轴缩放

语法

transform: scaleZ(z);


缩放scale3d

指定对象的3D缩放

语法

transform: scale3d(x,y,z);

矩阵matrix3d

以一个4x4矩阵的形式指定一个3D变换

语法

  • transform: matrix(sx,n,n,n,n,sy,n,n,n,n,sz,n,n,n,n,1);

参数说明

使用16个值得4X4矩阵

CSS3 Transform与坐标系统

transform-origin属性

允许更改转换元素的位置

语法

transform-origin: x-axis y-axis z-axis;

参数说明

  • x-axis 定义视图被置于 X 轴的何处。可能的值:left / center / right / length / %
  • y-axis 定义视图被置于 Y 轴的何处。可能的值:top / center / bottom / length / %
  • z-axis 定义视图被置于 Z 轴的何处。可能的值:length

CSS3矩阵

语法

transform: matrix(a,b,c,d,e,f);

这6个参数,对应的矩阵:

矩阵1

矩阵的计算

矩阵2

  • 其中,x, y表示转换元素的所有坐标(变量)了
  • ax+cy+e为变换后的水平坐标,bx+dy+f表示变换后的垂直坐标

移动translate

transform: matrix(1, 0, 0, 1, tx, ty);就等同于transform: translate(x, y);

  • 变换后的水平坐标为 ax+cy+e=x+0+tx=x+tx,也就是X轴方向偏移了tx
  • 变换后的垂直坐标为 bx+dy+f=0+y+ty=y+ty,也就是X轴方向偏移了ty

缩放scale

transform: matrix(sx, 0, 0, sy, 0, 0);就等同于transform: scale(sx,sy);

  • 变换后的水平坐标为 ax+cy+e=0+0+tx=sx*x,也就是X轴方向缩放了sx
  • 变换后的垂直坐标为 bx+dy+f=0+0+ty=sy*y,也就是X轴方向缩放了sy

旋转rotate

transform: matrix(cosθ,sinθ,-sinθ,cosθ,0,0);就等同于transform: rotate(θdeg);

  • 变换后的水平坐标为 ax+cy+e=0+0+tx=x*cosθ-y*sinθ
  • 变换后的垂直坐标为 bx+dy+f=0+0+ty=x*sinθ+y*cosθ

拉伸skew

transform: matrix(1,tan(θy),tan(θx),1,0,0);就等同于transform: skew(θxdeg,θydeg);

  • 变换后的水平坐标为 ax+cy+e=0+0+tx=x+y*tan(θx)
  • 变换后的垂直坐标为 bx+dy+f=0+0+ty=x*tan(θy)+y

CSS3 扩展属性

transform-style

指定嵌套元素是怎样在三维空间中呈现

语法

transform-style: flat|preserve-3d;

  • flat(默认) 子元素将不保留其 3D 位置
  • preserve-3d 子元素将保留其 3D 位置

perspective

指定观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果

语法

perspective: number|none;

  • none (默认) 与 0 相同,不设置透视
  • number 元素距离视图的距离,以像素计

perspective-origin

允许您改变 3D 元素的底部位置

语法

perspective-origin: x-axis y-axis;

参数说明

  • x-axis 定义视图被置于 X 轴的何处,默认为50%,可能的值:left / center / right / length / %
  • y-axis 定义视图被置于 Y 轴的何处,默认为50%,可能的值:top / center / bottom / length / %

backface-visibility

指定元素背面面向用户时是否可见

语法

backface-visibility: visible|hidden;

  • visible (默认) 背面是可见的
  • hidden 背面是不可见的
文章目录
  1. 1. CSS3 变形(transform)属性
  2. 2. CSS3 2D转换
    1. 2.1. 旋转rotate
    2. 2.2. 移动translate
    3. 2.3. 缩放scale
    4. 2.4. 扭曲skew
    5. 2.5. 矩阵matrix
  3. 3. CSS3 3D转换
    1. 3.1. 旋转rotate
    2. 3.2. 移动translate
    3. 3.3. 缩放scale
    4. 3.4. 矩阵matrix3d
  4. 4. CSS3 Transform与坐标系统
  5. 5. CSS3矩阵
    1. 5.1. 移动translate
    2. 5.2. 缩放scale
    3. 5.3. 旋转rotate
    4. 5.4. 拉伸skew
  6. 6. CSS3 扩展属性
    1. 6.1. transform-style
    2. 6.2. perspective
    3. 6.3. backface-visibility
|