CSS3 変換_html/css_WEB-ITnose-htmlチュートリアル-php.cn

概要

CSS3 変換は 2D/3D 変換とも呼ばれ、主に次のタイプが含まれます: Rotation (回転)、Distortion (傾き)、Scale (スケール)とtranslate(変換)と行列変換(行列)。トランスフォーム属性は、多くの場合、豪華なトランジションアニメーション効果を構築するためにトランジションと一緒に使用されます。

この記事には多くの内容が含まれているため、忍耐と注意深く読む必要があります。

あなたのスキルを少しテストしてみましょう

<!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" width="284" height="213" />    <p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p></div><div class="polaroid rotate_right">    <img src="http://i13.tietuku.com/755395ac04d54cc6.jpg" width="284" height="213" />    <p class="caption">2010年上海世博会，中国馆。</p></div></body></html>

ログイン後にコピー

トランジションとトランスフォームを組み合わせることによって実現される豪華なアニメーションの壁効果。

2次元変形

いわゆる2次元変形とは2次元平面上の変形のことで、中学校で習う平面幾何学です。

2D 変換は、x 軸、y 軸、および原点で構成される平面の周りの変換です。

移動、変換

変換の 3 つの値に対応して、移動には 3 つのケースがあります。

translate(x, y)

水平方向と垂直方向を同時に移動します (つまり、値が a の場合、X 軸と Y 軸が同時に移動します)。負の数を指定すると、オブジェクトを反対方向に移動します。

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

ログイン後にコピー

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

translateX(x)

水平方向に移動します。

transform: translateX(100px);

ログイン後にコピー

translateY(y)

垂直方向に移動します。

transform: translateY(20px);

ログイン後にコピー

回転回転

指定された角度で要素を回転します。時計回りの場合は値が正になり、反時計回りの場合は値が負になります。

transform: rotate(30deg);

ログイン後にコピー

Scale スケール

Scale スケールはモバイル変換と非常によく似ていますが、パラメータがズーム倍数に対応し、小数を使用できる点が異なります。、負の数。

scale(x, y)

水平方向と垂直方向の両方にスケールします。

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

ログイン後にコピー

例:transform:scale(2, 1.5); 幅は元の 2 倍、高さは元の 1.5 倍です。

次に、負の値の効果を体験してみましょう。

scaleX(x)

水平方向にスケールします。

transform: scaleX(2);

ログイン後にコピー

scaleY(y)

垂直方向にスケールします。

transform: scaleY(2);

ログイン後にコピー

歪みスキュー

歪みスキューには、translate およびscale と同じ 3 つの状況がありますが、パラメーター値は歪みの程度に対応します。

skew(x, y)

要素を水平方向と垂直方向の両方に歪みます。値は歪みの程度です。

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

ログイン後にコピー

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

上の図の x- の歪みに注目してください。軸方向はY軸を引っ張る、Y軸方向の歪みはX軸を引っ張る、角度の方向も非常に変なので覚えておきましょう。

skewX(x)

水平方向に歪みます。

transform: skewX(30deg);

ログイン後にコピー

skewY(y)

垂直方向に歪みます。

transform:skewY(10deg);

ログイン後にコピー

3D 変形

3D 変形とは、3 次元環境における変形のことで、中学で習う立体幾何です。

3D 変換には歪み操作はありませんが、移動、回転、拡大縮小はあります。

3D 変換の紹介その前に、3D に密接に関連する 4 つの属性を紹介する必要があります。

遠近感

遠近感属性は、ビューからの 3D 要素の距離をピクセル単位で定義します。この属性の存在によって、見えるものが 2D か 3D になるかが決まります。遠近法がなければ、それは 3D ではありません。

パースペクティブの使用とパースペクティブを使用するかどうかの違いについては、以下の具体的な変換で紹介します。

透視基点透視原点

透視基点も遠近法の結果に直接影響します。画像点で言えば、透視基点は 1 つの位置に立って見ることに相当します。目の前にあるものをしゃがんで見る、左側から横から見る、右側から見るなど、目の位置によって見え方が異なります。物の形。

視点のデフォルト値はperspective-origin: 50% 50%; で、要素に対してperspective-origin属性が定義されている場合、その子要素は対応する効果を取得します。要素自体ではありません。

perspective-origin: x-axis y-axis;

ログイン後にコピー

x 軸のオプション値:

左
中央
右
長さ
%

y 軸のオプション値:

上
中央
下
長さ
%

視点の原点が次のように記述されていることを理解してください。デフォルトは、表示されているステージまたは要素の中心です。場合によっては、センターの位置に興味がなく、他の場所に集中したいことがあります。

プレゼンテーションスタイルtransform-style

transform-style 属性は 3D 空間の重要な属性であり、ネストされた要素が 3D 空間でどのようにレンダリングされるかを指定します。これには、 flat と prepare-3d という 2 つの主な属性値があります。

transform-style: flat | preserve-3d;

ログイン後にコピー

フラット値はデフォルト値であり、すべてのサブ要素が 2D 平面上にレンダリングされることを意味します。 prepare-3d は、すべての子要素が 3D 空間でレンダリングされることを意味します。

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

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

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

背面可见 backface-visibility

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

backface-visibility: visible | hidden;

ログイン後にコピー

下面旋转的时候有例子。

移动 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="" width="70" height="100" />        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt="" width="70" height="100" />    </div></div>  <div class="s s2">    <div class="container">        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt="" width="70" height="100" />        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt="" width="70" height="100" />    </div></div><div class="s s3">    <div class="container">        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt="" width="70" height="100" />        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt="" width="70" height="100" />    </div></div><div class="s s4">    <div class="container c1">        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt="" width="70" height="100" />        <img src="http://i13.tietuku.com/ac99ad6b3a13d255.png" alt="" width="70" height="100" />    </div></div></body></html>

ログイン後にコピー

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

例子里有四个场景，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);

ログイン後にコピー

rotateY(angle)

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

基本类似下图的旋转。

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

ログイン後にコピー

rotateZ(angle)

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

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

ログイン後にコピー

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不断增加*/

ログイン後にコピー

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

ログイン後にコピー

perspective

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

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

ログイン後にコピー

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

<!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>

ログイン後にコピー

上面是设置在舞台元素上，下面是设置在每个元素上。图中的效果其实不难理解。上面舞台整个作为透视元素，因此，显然，我们看到的每个子元素的形体都是不一样的；而下面，每个元素都有一个自己的视点，因此，显然，因为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>

ログイン後にコピー

二，让子元素.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>

ログイン後にコピー

三，取消.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>

ログイン後にコピー

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

<!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>

ログイン後にコピー

五，改变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>

ログイン後にコピー

你看懂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

ログイン後にコピー

对上述的值简述如下：

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，其取值可以，不过在这里将无效。