小さな頭脳を3DCSS変換に巻き付けようとしていますが、scaleZ()関数の目的を理解するのに苦労しています。
scale()、scaleX()そしてscaleY()理にかなっています。指定された軸に沿って要素を引き伸ばし、その軸に沿った寸法に指定した数を掛けます。
しかし、scaleZ()違うようです：
<div>「太く」することはできません）。[
scaleZ()]は、変換された子のz軸に沿ったスケーリングに影響します。
これが実際に何を意味するのか理解できません。誰かが、できればいくつかのサンプルコードで説明を提供できますか？
質問されてから2年後に質問に答えるのはばかげているようですが、後世のために投稿します。
これは、変換行列と行列とベクトルの乗算に関係しています。基本的に、Z座標がゼロより大きい積を生成するための計算がうまくいかない限り、変換は機能していないように見えます。
これは簡単に説明できますが、数学のバックグラウンドがないと理解するのが少し難しいです。（しかし、週末に相当するWikiPediaの読み取りとGoogle検索で十分に学ぶことができます。それが私が学んだ方法です。）matrix（）とmatrix3d（）を除くすべての変換関数には、同等の行列値があります。scale3dの場合、マトリックスは次のとおりです。
[sx 0 0 0]
[0 sy 0 0]
[0 0 sz 0]
[0 0 0 1]
ここで、sx、sy、およびszは、x、y、およびz軸を中心としたスケーリングの係数です。scaleZの場合も同じですが、sxとsyはどちらも1です。
変換を適用すると、ブラウザはオブジェクトの各頂点の座標を取得し（非オタク語では、各ボックスコーナーの座標を取得します）、変換行列を乗算します。この積がオブジェクトの新しい座標になります。たとえば、transform: scaleZ(3)（100,50,0）で始まるオブジェクトの計算は次のようになります。
[1 0 0 0] [100] [100]
[0 1 0 0] * [ 50] = [ 50]
[0 0 3 0] [ 0] [ 0]
[0 0 0 1] [ 1] [ 1]
その製品[100500 1]は、3D座標系に変換すると、最初に使用したものになります：（100,50,0）。その結果、変換が適用されていないように見えます。scaleZ（）を使用した変換が効果を発揮するには、行列とベクトルの積の3番目の数値がゼロより大きくなければなりません。これは通常、scaleZ（）またはscale3d（）が親要素に適用されるか、別の変換関数と組み合わせて使用される場合に発生します。どちらの場合も、累積/現在の変換行列は、値がゼロより大きいZ座標になります。を使用した例を次に示しtransform: rotateY(30deg) scaleZ(3)ます。まず、の行列にの行列を掛ける必要がありrotateY(30deg)ますscaleZ(3)。
[0.866 0 -0.499 0] [1 0 0 0] [0.866 0 -1.497 0]
[0 1 0 0] * [0 1 0 0] = [0 1 0 0]
[0.499 0 0.866 0] [0 0 3 0] [0.499 0 2.598 0]
[0 0 0 1] [0 0 0 1] [0 0 0 0]
次に、行列積（等号の右側のビット）に（100,50,0）のポイントを掛けることができます。
[0.866 0 -1.497 0] [100] [86.6]
[0 1 0 0] * [ 50] = [50 ]
[0.499 0 2.598 0] [ 0] [49.9]
[0 0 0 1] [ 1] [ 1 ]
私たちの製品[86.65049.9 1]は、整数に四捨五入すると（87、50、50）の座標になります。そしてその2番目の50は私たちのZ座標です。変換には顕著な効果があります。
私はこれについて長い間混乱していましたが、実験した結果、理解するのは非常に簡単だと思います:
要素が Z 軸上で 100px に配置され、次のようにビューアに向かって移動すると仮定します。
div {
transform: translateZ(100px);
}
次に、Z 軸を 2 倍にスケーリングします。
div {
transform: scaleZ(2) translateZ(100px);
}
おっしゃる通り寸法は変わりませんが、そのままのサイズになりtranslateZ(200px)ます。scaleZ(2) translateZ(400px)などと同等ですtranslateZ(800px)。
これのデモンストレーションは JSFiddle で見ることができます。
scaleZ()要素に影響を与えるのではなく、要素が存在する Z 軸に影響を与えることを考えてください。
最後に 1 つ: ブラウザーは、複数の変換関数を個別に適用されているかのように扱う必要があります。つまり、それらの順序が重要です。を機能させるには、 のscaleZ()前に配置する必要がありtranslateZ()ます。そうしないと、要素を Z 軸上で移動し、視覚的な結果なしで軸をスケーリングするだけです。
のようなウェブthree viewsページがあります。X, Y & Zz-indexscaleZ()
w3cの発言を確認する
scale(<number>[, <number>])
specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.
scale3d(<number>, <number>, <number>)
specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
scaleX(<number>)
specifies a scale operation using the [sx,1,1] scaling vector, where sx is given as the parameter.
scaleY(<number>)
specifies a scale operation using the [1,sy,1] scaling vector, where sy is given as the parameter.
scaleZ(<number>)
specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.
リンクのアニメーションを確認してくださいhttp://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html
編集：
あなたのフィドルはまだscaleZ()その効果を得ることができるので、何が何であるかを説明していませんscaleY()。
このフィドルをチェックしてくださいhttp://jsfiddle.net/sandeep/dppNn/
私のフィドルの例では、scaleX() と scaleY() のみをスケーリングするため、2Dの3rd digit boxよう3D meansに見えscaleX(),scaleY() & scaleZ()ます。2nd digit box
Apple のSafari CSS Visual Effects Guideでは、次 のように説明されscaleZ()ています。
z 軸に沿った距離が大きくなったり小さくなったりするように、z 軸をスケーリングすることで、要素の子孫の座標系を変更できます。このスケーリングは要素の子孫にのみ影響し、スケーリングには 3D 変換を有効にする必要があるため、z 軸のスケーリングには少なくとも 2 つの 3D レイヤーが必要です。【地雷強調】
だから、私が理解しているように、いつ：
scaleZ()適用されました次に、内側のレイヤーの子孫に 3D 変換が適用されると、z 軸に沿った動きに に渡した値が乗算されますscaleZ()。か何か。
JSFiddle の例をポップアップしました。を削除する-webkit-transform: scaleZ(3);と、青いボックスは灰色のボックスの中に収まります。これは、z 軸に沿ってあまり移動しないためです。（おもう。）