CSS3 变换_html/css_WEB-ITnose-HTML Tutorial-php.cn

概览

CSS3 变换也叫 2D/3D转换，主要包括以下几种：旋转(rotate) 、扭曲 (skew) 、缩放(scale) 和移动(translate) 以及 矩阵变形(matrix) 。transform 属性常和 transition 一起使用来构造绚丽的过渡动画效果。

本文涉及的内容较多，不太好理解，需要耐心认真阅读。

小试牛刀

<!DOCTYPE html><html><head><style>     body {        margin:60px;    }    div.polaroid {        width:294px;        padding:10px 10px 20px 10px;        border:1px solid #BFBFBF;        background-color:white;        box-shadow:2px 2px 3px #aaaaaa;                transition: transform 1s;        -ms-transition: -ms-transform 1s;        -moz-transition: -moz-transform 1s;        -webkit-transition: -webkit-transform 1s;        -o-transition: -o-transform 1s;    }    /* 鼠标滑过图片归正 */    div.polaroid:hover {        -ms-transform:rotate(0); /* IE 9 */        -moz-transform:rotate(0); /* Firefox */        -webkit-transform:rotate(0); /* Safari and Chrome */        -o-transform:rotate(0); /* Opera */        transform:rotate(0);    }    div.rotate_left {        float:left;        -ms-transform:rotate(7deg); /* IE 9 */        -moz-transform:rotate(7deg); /* Firefox */        -webkit-transform:rotate(7deg); /* Safari and Chrome */        -o-transform:rotate(7deg); /* Opera */        transform:rotate(7deg);    }    div.rotate_right {        float:left;        -ms-transform:rotate(-8deg); /* IE 9 */        -moz-transform:rotate(-8deg); /* Firefox */        -webkit-transform:rotate(-8deg); /* Safari and Chrome */        -o-transform:rotate(-8deg); /* Opera */        transform:rotate(-8deg);    }</style></head><body><div class="polaroid rotate_left">    <img  src="http://i13.tietuku.com/d17ea072b13a1a71.jpg"    style="max-width:90%"  style="max-width:90%" / alt="CSS3 变换_html/css_WEB-ITnose" >    <p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p></div><div class="polaroid rotate_right">    <img  src="http://i13.tietuku.com/755395ac04d54cc6.jpg"    style="max-width:90%"  style="max-width:90%" / alt="CSS3 变换_html/css_WEB-ITnose" >    <p class="caption">2010年上海世博会，中国馆。</p></div></body></html>

Copy after login

结合 transition 和 transform 实现的绚丽动画墙效果。

2D 变换

所谓的 2D 变换，就是指在二维平面上的变换，中学学的平面几何。

2D 变换就是围绕 x 轴，y 轴及原点组成的平面所做的一些变换。

移动 translate

移动分三种情况，对应transform的三种值。

translate(x, y)

水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动），当值为负数时，反方向移动物体。

transform: translate(<x-value>[, <y-value>]) ;

Copy after login

例如：transform: translate(100px, 20px);

translateX(x)

水平方向上移动。

transform: translateX(100px);

Copy after login

translateY(y)

垂直方向上移动。

transform: translateY(20px);

Copy after login

旋转 rotate

通过指定的角度对元素进行旋转。值为正顺时针旋转，值为负逆时针旋转。

transform: rotate(30deg);

Copy after login

缩放 scale

缩放 scale和移动 translate极其相似，他也具有三种情况，只是参数对应的是缩放的倍数，允许小数、负数。

scale(x, y)

水平和垂直方向上同时进行缩放。

transform: scale(<x-number>[, <y-number>]);

Copy after login

例如： transform: scale(2, 1.5); 宽度是原来的2倍，高度是原来的1.5倍。

接下来我们来体验一下负值的效果。

scaleX(x)

水平方向缩放。

transform: scaleX(2);

Copy after login

scaleY(y)

垂直方向缩放。

transform: scaleY(2);

Copy after login

扭曲 skew

扭曲 skew和 translate、scale一样同样具有三种情况，只是参数值对应的是扭曲的度数。

skew(x, y)

使元素在水平和垂直方向同时扭曲，值为扭曲的度数。

transform: skew(<x-angle> [, <y-angle>]);

Copy after login

例如：transform:skew(30deg, 10deg);

注意上图中的度数偏转，x轴方向的扭曲是拉y轴，y轴方向的扭曲是拉x轴，角度的方向也很古怪，注意记忆。

skewX(x)

在水平方向进行扭曲变行。

transform: skewX(30deg);

Copy after login

skewY(y)

在垂直方向进行扭曲变形。

transform:skewY(10deg);

Copy after login

3D 变换

3D 变换就是在三维环境下的变换，中学时的立体几何。

3D 变换没有扭曲操作，有移动，旋转，缩放。

介绍 3D 变换之前我们需先介绍跟3D密切相关的4个属性。

透视 perspective

perspective 属性定义 3D 元素距视图的距离，你可以形象的理解为物体距你的距离，以像素计。该属性的存在与否决定了你看到的是2D还是3D，没有透视，不成3D。

透视的使用及是否使用透视的区别会在下面的具体变换中介绍。

透视基点 perspective-origin

透视基点也直接影响透视的结果，形象点说就是透视基点就相当于你站在一个位置看你面前的物体，你可以蹲着看，可以站着看，可以左侧斜着身子看，可以右侧斜着身子看，你的眼睛看的位置不同，可能看到物体的形状就不同。

透视点有默认值 perspective-origin: 50% 50%;, 当为元素定义 perspective-origin 属性时，其子元素会获得相应效果，而不是元素本身。

perspective-origin: x-axis y-axis;

Copy after login

x-axis 可选值：

left
center
right
length
%

y-axis 可选值：

top
center
bottom
length
%

理解perspective-origin 这样描述的：默认就是所看舞台或元素的中心。有时候，我们对中心的位置是不感兴趣的，希望视线放在其他一些地方。

呈现样式 transform-style

transform-style 属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat 和preserve-3d。

transform-style: flat | preserve-3d;

Copy after login

其中flat 值为默认值，表示所有子元素在2D平面呈现。preserve-3d 表示所有子元素在3D空间中呈现。

也就是说，如果对一个元素设置了transform-style 的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现而不是它的前面或者后面。如果对一个元素设置了transform-style 的值为preserve-3d ，它表示不执行平展操作，他的所有子元素位于3D空间中。

transform-style 属性需要设置在父元素中。

具体的使用看下面的具体变换。

背面可见 backface-visibility

在现实世界中，你在一张白纸上写下一些字，一般情况下从白纸后面是看不到写的啥的。而在CSS3的3D世界里，默认是可以从白纸的后面看到前面( visible )的内容的。

backface-visibility: visible | hidden;

Copy after login

下面旋转的时候有例子。

移动 translate

3D 移动有 translate3d(x, y, z) 和 translateZ(z) 两个变换函数。当然 2D 移动的那三个也可以应用到 3D 移动。

translate3d(x, y, z)

分别沿x, y, z 三个轴同时移动。

x, y轴的移动比较好理解，translate3d(x, y, 0) 等价于 translate(x, y), z 轴的移动你可以理解为：在你眼前的一个物体向你走来和远去，离你越近（z值越大）你感觉它越大，离你越远（z值越小）你感觉它越小。不过，变大变小是有前提的，就是我们前面说到的 perspective 属性需要指定合适的值。

对比如下实例：

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <style type="text/css">    .s {        width: 300px;        height: 300px;        float: left;        margin: 15px;        position: relative;        background: url(http://i13.tietuku.com/42a31a7ad86db39b.jpg) repeat center center;                -webkit-perspective: 1200px;        -moz-perspective: 1200px;        -ms-perspective: 1200px;        -o-perspective: 1200px;        perspective: 1200px;    }    .s3 {        -webkit-perspective: none;        -moz-perspective: none;        -ms-perspective: none;        -o-perspective: none;        perspective: none;    }    .container {        position: absolute;        top: 50%;        left: 50%;                -webkit-transform-style: preserve-3d;        -moz-transform-style: preserve-3d;        -ms-transform-style: preserve-3d;        -o-transform-style: preserve-3d;        transform-style: preserve-3d;    }    .container img {        position: absolute;        margin-left: -35px;        margin-top: -50px;     }    .container img:nth-child(1){        z-index: 1;        opacity: .6;    }    .s1 img:nth-child(2){        z-index: 2;            -webkit-transform: translate3d(30px,30px,200px);        -moz-transform: translate3d(30px,30px,200px);        -ms-transform: translate3d(30px,30px,200px);        -o-transform: translate3d(30px,30px,200px);        transform: translate3d(30px,30px,200px);    }    .s2 img:nth-child(2){        z-index: 2;            -webkit-transform: translate3d(30px,30px,-200px);        -moz-transform: translate3d(30px,30px,-200px);        -ms-transform: translate3d(30px,30px,-200px);        -o-transform: translate3d(30px,30px,-200px);        transform: translate3d(30px,30px,-200px);    }    .s3 img:nth-child(2){        z-index: 2;            -webkit-transform: translate3d(30px,30px,200px);        -moz-transform: translate3d(30px,30px,200px);        -ms-transform: translate3d(30px,30px,200px);        -o-transform: translate3d(30px,30px,200px);        transform: translate3d(30px,30px,200px);    }    .c1 {        -webkit-transform-style: flat;        -moz-transform-style: flat;        -ms-transform-style: flat;        -o-transform-style: flat;        transform-style: flat;    }    .s4 img:nth-child(2){        z-index: 2;            -webkit-transform: translate3d(30px,30px,-200px);        -moz-transform: translate3d(30px,30px,-200px);        -ms-transform: translate3d(30px,30px,-200px);        -o-transform: translate3d(30px,30px,-200px);        transform: translate3d(30px,30px,-200px);    }  </style></head><body><div class="s s1">    <div class="container">        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt=""    style="max-width:90%"  style="max-width:90%" />        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt=""    style="max-width:90%"  style="max-width:90%" />    </div></div>  <div class="s s2">    <div class="container">        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt=""    style="max-width:90%"  style="max-width:90%" />        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt=""    style="max-width:90%"  style="max-width:90%" />    </div></div><div class="s s3">    <div class="container">        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt=""    style="max-width:90%"  style="max-width:90%" />        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt=""    style="max-width:90%"  style="max-width:90%" />    </div></div><div class="s s4">    <div class="container c1">        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt=""    style="max-width:90%"  style="max-width:90%" />        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt=""    style="max-width:90%"  style="max-width:90%" />    </div></div></body></html>

Copy after login

这个例子包含不少内容，请认真品读。

例子里有四个场景，s3 没有加透视( perspective: none; )，往z 轴移动了，图片没有任何大小变化，s4 的呈现样式为 transform-style: flat; ，图片堆叠在一个平面内。s1 和 s2 既加了透视又设置样式为3D，所以s1 向视点靠近，图片变大，s2向视点远离，图片变小，同时呈现出遮隐效果。

经过这个例子相信你能大概明白 perspective 和 transform-style 的作用了。

translateZ(z)

沿z轴方向移动。

如果你理解了上面的例子，这个自然就明白了。

借此属性，再来说说 perspective. translateZ 的功能就是让元素在自己的眼前或近或远，元素或大或小。不过需要注意的是：当translateZ值非常接近perspective，但不超过的时候，该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当translateZ值再变大的时候，就看不见了——我们是看不见眼睛后面的东西的！

下图的效果是从 transform: translateZ(-150px); -> transform: translateZ(200px); 的效果。视距为150px

旋转 rotate

2D 旋转比较简单，只有一个函数，围绕一点旋转多少度即可，而3D 旋转要复杂的多，毕竟在三维空间了。

rotateX(angle)

x为旋转轴旋转指定的度数。

基本类似下图的旋转。

transform: translate(30px) rotateX(30deg);

Copy after login

rotateY(angle)

y为旋转轴旋转指定的度数。

基本类似下图的旋转。

transform: translate(0, 30px) rotateY(45deg);

Copy after login

rotateZ(angle)

z为旋转轴旋转指定的度数。从效果上来看，其实它和2D 变换的 rotate(angle) 完全一致。

transform: rotateZ(45deg);transform: rotate(45deg);

Copy after login

rotate3d(x, y, z, angle)

除了上面的三个外，还有一个 rotate3d.

我们知道 rotateX 是以x轴为旋转轴， rotateY是以y轴为旋转轴， rotateZ 是以z轴为旋转轴，如果我不想以这三个轴为旋转轴呢？这时我们的 rotate3d 就派上用场了。

中学我们学过向量（空间向量），[x, y, z] 三个向量可以确定一个空间向量，向量是有方向和大小的，三个值的范围均是 [-1 1], 例如：x=1 表示x轴正方向，x=-1 表示x轴反方向。

rotateX(a)函数功能等同于 rotate3d(1,0,0,a)
rotateY(a)函数功能等同于 rotate3d(0,1,0,a)
rotateZ(a)函数功能等同于 rotate3d(0,0,1,a)

下面的测试可以看出正负值的区别。

再看一下 rotate3d(1, 1, 1, 45deg) 和 rotate3d(-1, -1, -1, 45deg) 的。

你只要有一定的空间想象能力，能确定旋转轴位置，就能差不多想通它的变换，实在不行，拿一张扑克用手转转。

注：本属性的效果中我没有添加transform-style: preserve-3d; 你实践的时候记得添上，并再次体会 flat 和 preserve-3d 的区别。

学完了旋转，我们继续来探讨上面提到的几个相关属性。

backface-visibility

此属性用来设置元素是否透明，默认是透明的。下面举例对比。

backface-visibility: visible;transform: translate3d(30px,30px,200px) rotateY(0deg);/*从0不断增加*/

Copy after login

backface-visibility: hidden;transform: translate3d(30px,30px,200px) rotateY(0deg);/*从0不断增加*/

Copy after login

perspective

perspective属性有两种书写形式，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性值写在一起。

.stage {    perspective: 300px;}.stage .box {    transform: perspective(300px) rotateY(45deg);}

Copy after login

关于两者的区别，可以用下面的示例来区分。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <style type="text/css">    .stage {        width: 900px;        height: 100px;        margin-left: auto;        margin-right: auto;        padding: 100px 50px;        background-color: #f0f0f0;        position: relative;        transform-style: preserve-3d;    }    .s1 {        perspective: 300px;    }    .box {        width:100px;        height:100px;        float: left;        padding:10px;        box-sizing: border-box;    }    .s2 .box {        transform: perspective(300px) rotateY(45deg);    }    .s1 .box {        transform: rotateY(45deg);    }    .b1{background-color: rgba(51, 204, 117, 0.74902);}    .b2{background-color: rgba(204, 81, 51, 0.74902);}    .b3{background-color: rgba(51, 81, 204, 0.74902);}    .b4{background-color: rgba(81, 51, 117, 0.74902);}    .b5{background-color: rgba(51, 81, 117, 0.74902);}    .b6{background-color: rgba(117, 204, 81, 0.74902);}    .b7{background-color: rgba(51, 108, 81, 0.74902);}    .b8{background-color: rgba(204, 51, 117, 0.74902);}    .b9{background-color: rgba(81, 117, 51, 0.74902);}      </style></head><body><div class="stage s1">    <div class="box b1"></div>    <div class="box b2"></div>    <div class="box b3"></div>    <div class="box b4"></div>    <div class="box b5"></div>    <div class="box b6"></div>    <div class="box b7"></div>    <div class="box b8"></div>    <div class="box b9"></div></div><hr><div class="stage s2">    <div class="box b1"></div>    <div class="box b2"></div>    <div class="box b3"></div>    <div class="box b4"></div>    <div class="box b5"></div>    <div class="box b6"></div>    <div class="box b7"></div>    <div class="box b8"></div>    <div class="box b9"></div></div></body></html>

Copy after login

上面是设置在舞台元素上，下面是设置在每个元素上。图中的效果其实不难理解。上面舞台整个作为透视元素，因此，显然，我们看到的每个子元素的形体都是不一样的；而下面，每个元素都有一个自己的视点，因此，显然，因为rotateY的角度是一样的，因此，看上去的效果也就一模一样了！

上面的第8个元素不见了，这不难理解，前面一排门，每个门都是1米宽，你距离门3米，显示，当所有门都开了45°角的时候，此时，距离中间门右侧的第三个门正好与你的视线平行，这个门的门面显然就什么也看不到。

缩放 scale

3D变形中的缩放主要有 scaleZ(z) 和 scale3d(x,y,z) 两种函数。

scaleZ(z)

2D 环境下的缩放比较好理解，元素进行相应的放大缩小即可，而3D 环境下涉及到z 轴的缩放，z 轴的缩放很奇怪，至今没有想太透彻，只是简单的实践实践。有晓得的留言告知，后期想透彻了再更新此处。

我进行了若干种情况的实践。

一，单独使用 scaleZ ,发现无论如何改变缩放值，都没有任何变化。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <style type="text/css">    .wrapper {        float: left;        perspective: 300px;        transform-style: preserve-3d;    }    .cube {        font-size: 4em;        width: 2em;        margin: 1.5em auto;        perspective: 300px;        transform-style: preserve-3d;    }    .c2 {        margin-left: 50px;        // 不断调整此处的值，看不出任何变化。        transform: scaleZ(2);    }    .side {        position: relative;        width: 2em;        height: 2em;        background: rgba(255, 99, 71, 0.6);        border: 1px solid rgba(0, 0, 0, 0.5);        color: white;        text-align: center;        line-height: 2em;    }    .front {        //transform: translateZ(1em);    }  </style></head><body><div class="wrapper w1" style="margin-left:150px;">    <div class="cube">        <div class="side front">1</div>    </div></div><div class="wrapper w2">    <div class="cube c2">        <div class="side front">2</div>    </div></div></body></html>

Copy after login

二，让子元素.front进行3D变换，这时调整值，可以看出缩放效果。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <style type="text/css">    .wrapper {        float: left;        perspective: 300px;        transform-style: preserve-3d;    }    .cube {        font-size: 4em;        width: 2em;        margin: 1.5em auto;        perspective: 300px;        transform-style: preserve-3d;    }    .c2 {        margin-left: 50px;        transform: scaleZ(2);    }    .side {        position: relative;        width: 2em;        height: 2em;        background: rgba(255, 99, 71, 0.6);        border: 1px solid rgba(0, 0, 0, 0.5);        color: white;        text-align: center;        line-height: 2em;    }    .front {        transform: translateZ(1em);    }  </style></head><body><div class="wrapper w1" style="margin-left:150px;">    <div class="cube">        <div class="side front">1</div>    </div></div><div class="wrapper w2">    <div class="cube c2">        <div class="side front">2</div>    </div></div></body></html>

Copy after login

三，取消.front的变换，将变换应用到.c2上并置于缩放前，改变缩放值，没有任何变化。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <style type="text/css">    .wrapper {        float: left;        perspective: 300px;        transform-style: preserve-3d;    }    .cube {        font-size: 4em;        width: 2em;        margin: 1.5em auto;        perspective: 300px;        transform-style: preserve-3d;    }    .c2 {        margin-left: 50px;        transform: translateZ(1em) scaleZ(2);    }    .side {        position: relative;        width: 2em;        height: 2em;        background: rgba(255, 99, 71, 0.6);        border: 1px solid rgba(0, 0, 0, 0.5);        color: white;        text-align: center;        line-height: 2em;    }    .front {        //transform: translateZ(1em);    }  </style></head><body><div class="wrapper w1" style="margin-left:150px;">    <div class="cube">        <div class="side front">1</div>    </div></div><div class="wrapper w2">    <div class="cube c2">        <div class="side front">2</div>    </div></div></body></html>

Copy after login

四，调换移动和缩放的位置，再改变缩放的值，可以看出变化。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <style type="text/css">    .wrapper {        float: left;        perspective: 300px;        transform-style: preserve-3d;    }    .cube {        font-size: 4em;        width: 2em;        margin: 1.5em auto;        perspective: 300px;        transform-style: preserve-3d;    }    .c2 {        margin-left: 50px;        transform: scaleZ(2) translateZ(1em);    }    .side {        position: relative;        width: 2em;        height: 2em;        background: rgba(255, 99, 71, 0.6);        border: 1px solid rgba(0, 0, 0, 0.5);        color: white;        text-align: center;        line-height: 2em;    }    .front {        //transform: translateZ(1em);    }  </style></head><body><div class="wrapper w1" style="margin-left:150px;">    <div class="cube">        <div class="side front">1</div>    </div></div><div class="wrapper w2">    <div class="cube c2">        <div class="side front">2</div>    </div></div></body></html>

Copy after login

五，改变transform-origin（下面会介绍此属性）的默认值，再改变缩放值也可以看出变化。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <style type="text/css">    .wrapper {        float: left;        perspective: 300px;        transform-style: preserve-3d;    }    .cube {        font-size: 4em;        width: 2em;        margin: 1.5em auto;        perspective: 300px;        transform-style: preserve-3d;    }    .c2 {        margin-left: 50px;        transform-origin: 0 0 100px;        transform: scaleZ(2);    }    .side {        position: relative;        width: 2em;        height: 2em;        background: rgba(255, 99, 71, 0.6);        border: 1px solid rgba(0, 0, 0, 0.5);        color: white;        text-align: center;        line-height: 2em;    }    .front {        //transform: translateZ(1em);    }  </style></head><body><div class="wrapper w1" style="margin-left:150px;">    <div class="cube">        <div class="side front">1</div>    </div></div><div class="wrapper w2">    <div class="cube c2">        <div class="side front">2</div>    </div></div></body></html>

Copy after login

你看懂3D 缩放了吗？

scale3d(x,y,z)

此属性值不再多介绍，x, y, z 同scaleX(x), scaleY(y), scaleZ(z)。

transform-origin

transform-origin 是用来设置变换基点的属性，所谓变换基点即变换的参照点，上面之所以没有说，是因为其有默认值是元素的中心点，并且可以用来设置2D变换和3D变换的基点。

平移操作不受基点位置的影响，旋转，缩放，扭曲都跟基点有关联。

例如：按元素中心旋转45度和按左上角旋转45度。

更改基点很好掌握，其属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。

具体语法如下：

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

Copy after login

对上述的值简述如下：

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