ホームページ > 記事 > ウェブフロントエンド > CSS3 変換_html/css_WEB-ITnose
CSS3 変換_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:03:521096ブラウズ
概要
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-origintransform-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水平方向Ｘ轴的偏移量，可以使用d82af2074b26fcfe177e947839b5d381和42c97a047d75abc12b9b351eb8562711值，同时也可以是正值（从中心点沿水平方向Ｘ轴向右偏移量），也可以是负值（从中心点沿水平方向Ｘ轴向左偏移量）。
offset-keyword：是top、right、bottom、left或center中的一个关键词。
y-offset：用来设置transform-origin属性在垂直方向Ｙ轴的偏移量，可以使用d82af2074b26fcfe177e947839b5d381和42c97a047d75abc12b9b351eb8562711值，同时可以是正值（从中心点沿垂直方向Ｙ轴向下的偏移量），也可以是负值（从中心点沿垂直方向Ｙ轴向上的偏移量）。
x-offset-keyword：是left、right或center中的一个关键词，可以用来设置transform-origin属性值在水平Ｘ轴的偏移量。
y-offset-keyword：是top、bottom或center中的一个关键词，可以用来设置transform-origin属性值在垂直方向Ｙ轴的偏移量。
z-offset：用来设置3D变形中transform-origin远离用户眼睛视点的距离，默认值z=0，其取值可以d82af2074b26fcfe177e947839b5d381，不过42c97a047d75abc12b9b351eb8562711在这里将无效。
看上去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%
变换基点作用在当前元素上。
行列変換行列行列変換は 2D 変換と 3D 変換の両方を実行できます。つまり、上で紹介した変換はすべて行列変換の特殊なケースです。
次のコンテンツは、幾何学と数学をテストするための時間です。
CSS で変換を表すには 4x4 行列が使用されます。
マトリックスは数値 (整数、小数、または正の数、負の数、ゼロ) でいっぱいです。当社のモニターでは、数値をピクセル値として理解できます。
変換は平面または空間に基づいており、数値は自然に座標値に対応できます。
座標系を導入したので、当然座標の原点を考えることになります。そう、それは変換原点です。
2D 変換の行列関数は、matrix(a, b, c, d, e, f) です。対応する行列は次のとおりです。
3D 変換の行列関数は次のとおりです。 m43 ,m44)
上記の変換に対応する行列プロトタイプを以下に示します。
移動移動
3D 移動の行列プロトタイプは次のとおりです。
matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)
2D のプロトタイプ動作は上記のtz=0の状況です。
matrix(1, 0, 0, 1, x, y)
scale
3D スケーリングの行列プロトタイプは次のとおりです:
matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1)
2D 運動の原型は上記はsz=1の場合。
matrix(sx, 0, 0, sy, 0, 0)
rotate
3D 回転の行列プロトタイプは次のとおりです:
回転軸はベクトル [x, y, z] によって定義されます。上記のrotate3dで導入されました。
α は回転角度です。
2D 回転は、実際には Z 軸、つまりベクトル [0, 0, 1] を中心とした回転です。
対応する行列を自分で記述します。
歪みスキュー
歪みは 2D 歪みにすぎません。
skew(αdeg, βdeg)
x 軸に沿ってのみツイスト、β=0、y 軸に沿ってのみツイスト、α=0。
遠近距離遠近法
遠近距離にも対応する行列があります。
行列演算
すべての変換は 2D または 3D 空間で確立されます。実際、3D 空間としても完全に理解できます (3D には 2D、Z 軸が含まれます)。 0だと2Dではないですか？）
すべての変換を座標操作として理解すると、はるかに理解しやすくなります。
行列の乗算の定義を見てみましょう:
以下では、行列演算を示す例として 3D 移動を使用します。
元の座標は (a,b,c) から (a+x,b+y,c+z) に変化します。
まとめ直感から始めるCalculation では、CSS3 変換のさまざまな状況について詳しく説明しています。変換についてはすでにある程度理解していると思います。
ひねったり、少しひねったりすることを除けば、2D 変形は比較的理解しやすいです。 3D の回転は少し複雑ですが、3D のスケーリングは完全に修正されていません。知っている人がいたら教えてください。
変換に関与する 4 つの属性。
perspective は、人物からステージまでの距離として理解されるステージ要素 (変換要素の親要素) を設定します。
Transform-style も親要素に設定され、子要素が 2 次元平面にあるか 3 次元空間にあるかを制御します。
transform-origin は、transform 要素に作用し、変換の基点 (座標原点) を制御します。
backface-visibility は変換要素に作用し、180 度回転したときに変換要素の背面が表示されるかどうかを示します。
記事がかなり遅れてしまいましたので、先にこのように投稿させていただきます。 3D スケーリングに関するディスカッションのためにメッセージを忘れずに残してください。
参考資料CSS3 トランジション、トランスフォーム、アニメーションの紹介と応用デモンストレーション
2D および 3D での CSS 変換 (暫定版) CSS3 でのtranslate3D 詳細説明
CSS3 変換のマトリックス (行列) を理解する
さて、CSS3 3D 変換はこれ以上は必要ありません。
CSS3 3D Transform
CSS3 Transform
CSS3 Transform—transform-origin
変換関数の数学的説明
変換関数