CSS3的transform知识:详解transform

文章简介：在这篇文章，回顾了CSS3的transform的基本知识，然后深入介绍了transform-origin的相关知识。

在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观——旋转或缩放？

多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaScript才能完成。不过，CSS3将要改变设计师这种思维，进入CSS3时代，借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。

在2011年05月在站上发表了第一篇有关于CSS3 Transform教程，现已时隔近两年，有很多东西都有变化，而且理解也略有不同，接下来将会分几篇教程，向大家介绍CSS3 Transform相关的知识。

CSS3变形的介绍

2012年9月，W3C组织发布了CSS3变形工作草案。CSS3变形允许CSS把元素转变为2D 或3D空间，这个草案包括了CSS3 2D变形和CSS3 3D变形。

CSS3变形是一些效果的集合，比如平移、旋转、缩放和倾斜效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发生旋转、缩放、和平移等变化。这些效果在之前都需要依赖图片、Flash或JavaScript才能完成。而使用纯CSS来完成这些变形则无需加载这些额外的文件，再一次提升了你的开发效率，还提高了页面的执行效率。

CSS变形允许您动态的控制元素。您可以在屏幕周围移动它们，缩小或扩大，旋转，或结合所有这些产生复杂的动画效果。通过CSS变形，可以让元素生成静态视觉效果，但也可以很容易结合CSS3的transition和动画的keyframe产生一些动画效果。在本章中，首先介绍简单的2D变形，然后向您展示如何扩展转换成3D变形。

  • CSS3的transform属性指一组转换函数。
  • CSS3的2D transform函数包括了translate()、scale()、rotate()和skew()。
  • translate()函数接受CSS的标准度量单位；scale()函数接受一个0和1之间的十进制值；rotate()和skew()两个函数都接受一个径向的度量单位值deg。除了rotate()函数之外，每个函数都接受X轴和Y轴的参数。
  • CSS3变形中具有X /Y可用的函数：translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。
  • 2D变形中还有一个矩阵matrix()函数，其包括六个参数。
  • CSS3 3D变形包括函数有：rotateX()、rotateY()、rotate3d()、translateZ()、translate3d()、scaleZ()和scale3d()。
  • CSS3 3D变形中也包括一个矩阵matrix3d()函数，其包括16个参数。
  • transform-origin属性指定元素的中心点在哪。后面增加了第三个数transform-origin-z，控制元素三维空间中心点。
  • perspective属性相对于观众产生一个3D场景，你看3D物体，眼睛到画布的距离。正确的用法是他需要应用到变形元素的祖先元素上。
  • perspective-origin为视点的位置。
  • backface-visibilty属性用来设置背面的可见性。
  • 设置transform-style的值为preserve-3d值，建立一个3D渲染环境。

transform属性

CSS3的变形（transform）属性让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以移动、旋转和缩放元素。transform属性的基本语法如下：

transform：none  <transform-function> [<transform-function>]*

transform属性可用于内联元素和块元素。其默认值为none，表示不元素不进行变形。transform另一个属性值是一系列的<transform-function>。<transform-function>表示一个或多个变形函数，以空格分开；换句话说就是我们同时对一个元素进行变形的多种属性操作，例如rotate、scale、translate等。但这里需要提醒大家，以往我们叠加效果都是用逗号(“，”)隔开，但在transform中使用多个transform-function时却需要有空格隔开。

transform属性3D变形（3D transform）模块的一部分，也就是说所有的2D变形函数也包含于3D变形规范中。如此一来，CSS3变形中的函数根据不同的规范略有不同，下面列出的是变形中的2D和3D常用变形函数的功能，简单说明如下：

2D transform常用的transform-function的功能:

  • translate()：用来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。在此基础上有两个扩展函数：translateX()和translateY()。
  • scale()：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：scaleX()和scaleY()。
  • rotate()：用来旋转元素。
  • skew()：用来让元素倾斜。在此基础上有两个扩展函数：skewX()和skewY()。
  • matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

3D transform常用的transform-function的功能:

  • translate3d()：移元素元素，用来指定一个3D变形移动位移量
  • translate()：指定3Ｄ位移在Ｚ轴的位移量。
  • scale3d()：用来缩放一个元素。
  • scaleZ():指定Z轴的缩放向量。
  • rotate3d()：指定元素具有一个三维旋转的角度。
  • rotateX()、rotateY()和rotateZ()：让元素具有一个旋转角度。
  • perspective()：指定一个透视投影矩阵。
  • matrix3d()：定义矩阵变形。

transform-origin属性

默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处，如下图所示：

我们没有使用transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

如果我们把元素变换原点（transform-origin）设置0（x） 0（y），这个时候元素的变换原点转换到元素的左顶角处，如下图所示：

正如上图所示，改变transform-origin属性的X轴和Ｙ轴的值就可以重置元素变形原点位置，其基本语法如下所示:

transform-origin：[<percentage>
					<length>  left  center  right  top  bottom]  [<percentage>
					<length>  left  center  right]  [[<percentage>
					<length>  left  center  right] && [<percentage>
					<length>  top  center  bottom]] <length> ?

上面的语法让人看得发晕，其实可以将语法拆分成：

/*只设置一个值的语法*/ transform-origin: x-offset transform-origin:offset-keyword /*设置两个值的语法*/ transform-origin：x-offset  y-offset transform-origin：y-offset  x-offset-keyword transform-origin：x-offset-keyword  y-offset transform-origin：x-offset-keyword  y-offset-keyword transform-origin：y-offset-keyword  x-offset-keyword /*设置三个值的语法*/ transform-origin：x-offset  y-offset  z-offset transform-origin：y-offset  x-offset-keyword  z-offset transform-origin：x-offset-keyword  y-offset  z-offset transform-origin：x-offset-keyword  y-offset-keyword  z-offset transform-origin：y-offset-keyword  x-offset-keyword  z-offset

transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。

2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Ｙ轴的位置。

3D的变形中的transform-origin属性还包括了Ｚ轴的第三个值。其各个值的取值简单说明如下：

  • x-offset：用来设置transform-origin水平方向Ｘ轴的偏移量，可以使用<length>和<percentage>值，同时也可以是正值（从中心点沿水平方向Ｘ轴向右偏移量），也可以是负值（从中心点沿水平方向Ｘ轴向左偏移量）。
  • offset-keyword：是top、right、bottom、left或center中的一个关键词，可以用来设置transform-origin的偏移量。
  • y-offset：用来设置transform-origin属性在垂直方向Ｙ轴的偏移量，可以使用<length>和<percentage>值，同时可以是正值（从中心点沿垂直方向Ｙ轴向下的偏移量），也可以是负值（从中心点沿垂直方向Ｙ轴向上的偏移量）。
  • x-offset-keyword：是left、right或center中的一个关键词，可以用来设置transform-origin属性值在水平Ｘ轴的偏移量。
  • y-offset-keyword：是top、bottom或center中的一个关键词，可以用来设置transform-origin属性值在垂直方向Ｙ轴的偏移量。
  • z-offset：用来设置3D变形中transform-origin远离用户眼睛视点的距离，默认值z=0，其取值可以<length>，不过<percentage>在这里将无效。

看上去transform-origin取值与background-position取值类似。为了方便记忆，可以把关键词和百分比值对比起来记：

  • top = top center = center top = 50% 0
  • right = right center = center right = 100%或(100% 50%)
  • bottom = bottom center = center bottom = 50% 100%
  • left = left center = center left = 0或(0 50%)
  • center = center center = 50%或（50% 50%）
  • top left = left top = 0 0
  • right top = top right = 100% 0
  • bottom right = right bottom = 100% 100%
  • bottom left = left bottom = 0 100%

为了让大家能一眼看明白，下面截图以transform中的旋转rotate()为例，并transform-origin取值不一样时的效果：

transform-origin取值为center（或center center或50% 或50% 50%）：

transform-origin取值为top（或top center或center top或50％ 0）：

transform-origin取值为right(或right center 或center right 或 100％ 或 100％ 50％)：

transform-origin取值为bottom(或bottom center 或center bottom 或 50％ 100％)：

transform-origin取值为left(或left center或center left或0或0 50％):

transform-origin取值为top left(或left top或0 0)：

transform-origin取值为right top（或top right或100％ 0）：

transform-origin取值为bottom right（或right bottom或100％ 100％）:

transform-origin取值为left bottom（或bottom left 或 0 100％）:

CSS3变形中旋转、缩放、倾斜都可以通过transform-origin属性重置元素的原点，但其中的位移translate()始终以元素中心点进行位移。例如下面的两段代码的演示过程：

div
			{   -webkit-transform-origin:
									50% 50%;
					-moz-transform-origin:
									50% 50%;
					-o-transform-origin:
									50% 50%;
					-ms-transform-origin:
									50% 50%;
					transform-origin:
									50% 50%;
					-webkit-transform:
									translate(40px, 40px)
									translate(-50px, 35px)
									translateY(30px);
					-moz-transform:
									translate(40px, 40px)
									translate(-50px, 35px)
									translateY(30px);
					-o-transform:
									translate(40px, 40px)
									translate(-50px, 35px)
									translateY(30px);
					-ms-transform:
									translate(40px, 40px)
									translate(-50px, 35px)
									translateY(30px);
					transform:
									translate(40px, 40px)
									translate(-50px, 35px)
									translateY(30px);
					}

接下来通过transform-origin将变形原点设置为100% 100%:

div
			{   -webkit-transform-origin:
									100% 100%;
					-moz-transform-origin:
									100% 100%;
					-o-transform-origin:
									100% 100%;
					-ms-transform-origin:
									100% 100%;
					transform-origin:
									100% 100%;
					-webkit-transform:
									translate(40px, 40px)
									translate(-50px, 35px)
									translateY(30px);
					-moz-transform:
									translate(40px, 40px)
									translate(-50px, 35px)
									translateY(30px);
					-o-transform:
									translate(40px, 40px)
									translate(-50px, 35px)
									translateY(30px);
					-ms-transform:
									translate(40px, 40px)
									translate(-50px, 35px)
									translateY(30px);
					transform:
									translate(40px, 40px)
									translate(-50px, 35px)
									translateY(30px);
					}

虽然元素的变形原点通过transform-origin从50% 50%变成100% 100%，但元素位移translate()始终是依元素中心点进行位移，如下图所示：

到目前为止，transform-origin属性在现代主流浏览器得到很好的支持，但在一些浏览器之下依然需要添加各浏览器私有属性，详细情况如下所示:

  • 2D变形中transform-origin需要添加浏览器私有属性版本：IE9+、Firefox3.5+、Chrome4+、Safari3.1+、Opera10.5+；iOS Safari3.2+、Android Browser2.1+、Blackberry Browser7.0+、Chrome for Android25.0+。
  • 2D变形中transform-origin支持W3C标准规范的浏览器：IE10+、Firefox16+、Opera12.1+；Opera Mobile11.0+、Firefox for Android19.0。
  • 3D变形中transform-origin需要添加浏览器私有属性版本：IE10+、Firefox10+、Chrome12+、Safari4+、Opera15+、iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+。
  • 3D变形中transform-origin支持W3C标准规范的浏览器:Firefox16+、Firefox for Android19+

通过transform-origin属性改变元素的原点，可以实现不同的变形效果，下面的示例中我们分别演示了改变元素原点前后，CSS3变形各函数对图像变形操作。

为了能更具有对比性，下面的示例中有两个div，每个div各有5个img，而第一个div是指transform-origin为默认值时效果，第二个div是指transform-origin修改后在不同transform函数中效果。

<div>
			<img
					src="images/cardKingClub.png"
					alt=""
					width="142"
					height="200" />
			<img
					src="images/cardKingClub.png"
					alt=""
					width="142"
					height="200" />
			<img
					src="images/cardKingClub.png"
					alt=""
					width="142"
					height="200" />
			<img
					src="images/cardKingClub.png"
					alt=""
					width="142"
					height="200" />
			<img
					src="images/cardKingClub.png"
					alt=""
					width="142"
					height="200" />
			</div>
			<div>
			<img
					src="images/cardKingClub.png"
					alt=""
					width="142"
					height="200" />
			<img
					src="images/cardKingClub.png"
					alt=""
					width="142"
					height="200" />
			<img
					src="images/cardKingClub.png"
					alt=""
					width="142"
					height="200" />
			<img
					src="images/cardKingClub.png"
					alt=""
					width="142"
					height="200" />
			<img
					src="images/cardKingClub.png"
					alt=""
					width="142"
					height="200" />
			</div>

默认样式：

div
			{     width:
									500px;
					height:
									300px;
					margin:
									30px auto;
					position: relative;
					background:
									url(images/bg-grid.jpg) no-repeat center center;
					background-size:
									100% 100%;
					}
			div
			img
			{     position: absolute;
					top:
									50%;
					left:
									50%;
					margin-left: -71px;
					margin-top: -100px;
					}

注：为了节省篇幅，代码中省去了各浏览器前缀。

首先来看transform-origin属性改变元素原点前后rotate()函数对图像的旋转效果：


			div
			img:nth-child(1){     opacity: .5;
					z-index:
									1;
					transform:
									rotate(10deg);
					}
			div
			img:nth-child(2){     opacity: .6;
					z-index:
									2;
					transform:
									rotate(25deg);
					}
			div
			img:nth-child(3){     opacity: .7;
					z-index:
									3;
					transform:
									rotate(35deg);
					}
			div
			img:nth-child(4){     opacity: .8;
					z-index:
									4;
					transform:
									rotate(45deg);
					}
			div
			img:nth-child(5){     z-index:
									5;
					transform:
									rotate(60deg);
					}
			div:nth-of-type(2)
			img
			{     transform-origin: bottom;
					}

上面实例演示了变形中旋转rotate()函数围绕不同原点旋转的效果，第一个容器div中的图片围绕图片默认原点（中心）旋转的过程；而第二个容器div中的图片经过transform-origin属性将图片原点从中心点（center）修改为底部中心点（bottom）旋转过程：

接下来，我们在来看transform-origin修改原点前后，CSS3变形中倾斜skew()函数对图片变形的过程：

div
			img:nth-child(1){     opacity: .5;
					z-index:
									1;
					transform:
									skewX(10deg);
					}
			div
			img:nth-child(2){     opacity: .6;
					z-index:
									2;
					transform:
									skewX(15deg);
					}
			div
			img:nth-child(3){     opacity: .7;
					z-index:
									3;
					transform:
									skewX(20deg);
					}
			div
			img:nth-child(4){     opacity: .8;
					z-index:
									4;
					transform:
									skewX(25deg);
					}
			div
			img:nth-child(5){     z-index:
									5;
					transform:
									skewX(30deg);
					}
			div:nth-of-type(2)
			img
			{     transform-origin: bottom;
					}

效果如下所示：

上面两个例子简单的演示了变形中的rotate()和skew()函数都可以通过transform-origin属性改变对象原点，让对象根据不同的原点进行变形。接来我继续向大家演示变形中的缩放scale()函数在不同原点产生变形效果：

div
			img:nth-child(1){     opacity: .5;
					z-index:
									1;
					transform:
									scale(1.2);
					}
			div
			img:nth-child(2){     opacity: .6;
					z-index:
									2;
					transform:
									scale(1.1);
					}
			div
			img:nth-child(3){     opacity: .7;
					z-index:
									3;
					transform:
									scale(.9);
					}
			div
			img:nth-child(4){     opacity: .8;
					z-index:
									4;
					transform:
									scale(.8);
					}
			div
			img:nth-child(5){     z-index:
									5;
					transform:
									scale(.6);
					}
			div:nth-of-type(2)
			img
			{     transform-origin: right;
					}

效果如下所示：

上面三个简单实例再次验证了CSS3变形中的旋转rotate()、缩放scale()和倾斜skew()函数都可以通过transform-origin属性来改变元素对象的原点位置。但是transform-origin属性改变元素对像原点位置，位移translate()函数始终会根据元素对像中心点进行位移。

前面演示的只是2D变形中transform-origin用来修改元素对象原点，以及对各种变形函数产生的不同效果。接下来，在来看一个简单的实例，演示一下3D变形中transform-origin修改元素原点的3D旋转效果。

div
			img
			{     position: absolute;
					top:
									50%;
					left:
									50%;
					margin-left: -71px;
					margin-top: -100px;
					backface-visibility: visible;
					transform:
									perspective(500px);
					}
			div
			img:nth-child(1){     opacity: .5;
					z-index:
									1;
					transform:
									rotate3d(1, 1, 1,10deg);
					}
			div
			img:nth-child(2){     opacity: .6;
					z-index:
									2;
					transform:
									rotate3d(1, 1, 1,25deg);
					}
			div
			img:nth-child(3){     opacity: .7;
					z-index:
									3;
					transform:
									rotate3d(1, 1, 1,35deg);
					}
			div
			img:nth-child(4){     opacity: .8;
					z-index:
									4;
					transform:
									rotate3d(1, 1, 1,45deg);
					}
			div
			img:nth-child(5){     z-index:
									5;
					transform:
									rotate3d(1, 1, 1,60deg);
					}
			div:nth-of-type(2)
			img
			{     transform-origin: left bottom -50px;
					}

其效果如下所示：

下一篇

在这篇文章，回顾了CSS3的transform的基本知识，然后深入介绍了transform-origin的相关知识。在接下来的文章中，我们将一起探讨transform-style和perspective属性的应用。大家和我一起期待吧。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/transform-origin.html

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索变形
， 函数
， 3d矩阵
， 属性
， 元素
， transform
， center
， css3变形
， translate
， Android变形
页面变形
，以便于您获取更多的相关知识。

时间： 2024-09-15 18:11:18

CSS3的transform知识:详解transform的相关文章

CentOS6.3启动的相关知识详解

  CentOS6.3启动的相关知识详解          CentOs 6.3启动之前按E键,再按E,进行入GNU GRUB页面. GNU GRUB 是一个多重操作系统启动管理器.GRUB是GRand Unified Bootloader的缩写. root(hd0,0) root指定启动时的位置,hd0电脑的第一块硬盘,后面的数字代表分区的意思,即第一个分区.整体意思就是:从第一块硬盘第一个分区启动 kernel /boot/vmlinuz-2.6.32-358.el6.x86_64 ro r

JavaScript数据结构链表知识详解_javascript技巧

最近在看<javascript数据结构和算法>这本书,补一下数据结构和算法部分的知识,觉得自己这块是短板. 链表:存储有序的元素集合,但不同于数组,链表中的元素在内存中不是连续放置的.每个元素由一个存储元素本身的节点和一个指向下一个元素的引用(也称指针或链接)组成. 好处:可以添加或移除任意项,它会按需扩容,且不需要移动其他元素. 与数组的区别:     数组:可以直接访问任何位置的任何元素:     链表:想要访问链表中的一个元素,需要从起点(表头)开始迭代列表直到找到所需的元素. 做点小笔

JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)_javascript技巧

一.函数作用域 1.函数作用域 就是作用域在一个"Function"里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; function bar() { // ... } var c = 3; } bar(); // 失败 console.log( a, b, c ); // 三个全都失败 上面的"foo"函数内的几个标识符,放到函数外面访问就都会报错. 2.立即执行函数表达式 在任意代码片段外部

关于java中构造函数的一些知识详解_java

java的构造函数是一个非常重要的作用,首先java里的构造函数是可以重载的,而且因为也是可以继承在父类的构造函数,所以在子类里,首先必然是调用父类的构造函数.可以看下面的两个例子来对比: public class Test { public static void main(String args[]) { B b = new B(100); } } class A { public A() { System.out.println("A without any parameter"

C#重点知识详解（一）（转）

详解 在微软的.NET推出后,关于C#的有关文章也相继出现,作为微软的重要的与JAVA抗衡的语言,C#具有很多优点.本文将选一些C#语言中的重要知识详细介绍, 第一章:参数 1.1 IN 参数 c#种的四种参数形式: 一般参数 in参数 out参数 参数数列 本章将介绍后三种的使用. 在C语言你可以通传递地址(即实参)或是DELPHI语言中通过VAR指示符传递地址参数来进行数据排序等操作,在C#语言中,是如何做的呢?"in"关键字可以帮助你.这个关键字可以通过参数传递你想返回的值. n

C#重点知识详解（一）

详解 前沿 在微软的.NET推出后,关于C#的有关文章也相继出现,作为微软的重要的与JAVA抗衡的语言,C#具有很多优点.本文将选一些C#语言中的重要知识详细介绍, 第一章:参数 1.1 IN 参数 c#种的四种参数形式: 一般参数 in参数 out参数 参数数列本章将介绍后三种的使用. 在C语言你可以通传递地址(即实参)或是DELPHI语言中通过VAR指示符传递地址参数来进行数据排序等操作,在C#语言中,是如何做的呢?"in"关键字可以帮助你.这个关键字可以通过参数传递你想返回的值.

前端框架Vue.js中Directive知识详解_javascript技巧

Directive 看上去虽然和Angular中的定义类似,Directive 都是对DOM功能的一种拓展,但是 Vue 的 Directive 要弱的多.因为 Vue Component 其实本来就会包含对DOM的操作,所以大多数时候我们写一个通用组件都是一个Component 而不是一个 Directive,而 在 Angular 我们写一个通用的组件一般都是一个 Directive . 所以我说 Vue 的 Directive 相比于 Angular 要弱的多,也可以说纯粹的多,他就是对

C++表达式new与delete知识详解_C 语言

在C++中,new表达式用于动态创建对象,即在堆(自由存储区)空间上为对象分配内存,而程序员也要小心的使用这些申请来的内存空间,当不再使用时应该调用delete表达式来释放该存储空间并且将指针置零. 本文学习了如何动态创建对象,动态创建的对象与一般对象的区别,动态创建的对象的初始化以及释放动态分配的内存等知识点. C++中分配的内存大致有三类:静态存储区,栈内存和堆内存 其中,静态存储区是在程序编译阶段就已经分配好的,用于全局变量,static变量等:堆栈是比较常用的对象存储方式. new和de

Android RecyclerView 基础知识详解_Android

本周的谷歌I/O大会带来了很多关于Android的振奋人心的消息.可能我们需要较长的时间来消化Android L引入的新东西. 这些天我一直在研究RecyclerView,并想在此给各位分享一下到目前为止我的成果. RecyclerView是什么? RecyclerView是一种新的视图组,目标是为任何基于适配器的视图提供相似的渲染方式.它被作为ListView和GridView控件的继承者,在最新的support-V7版本中提供支持. 在开发RecyclerView时充分考虑了扩展性,因此用它