CSS変換の深い理解transform(3d)_html/css_WEB-ITnose

× 目次 [1] 座標軸 [2] 遠近法 [3] 変換関数 [4] 遠近法関数 [5] 変換原点 [6] 表示される背景 [7] 変換スタイル

前の単語

この記事では、トランスフォーム 3D の内容については、トランスフォーム 2D を理解した上で行う必要があります。 3D変形に関わる属性は主にtransform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility

座標軸

パースを理解する前に、まず座標軸について理解する必要があります。 3D変形と2D変形の最大の違いは、基準となる座標軸が異なることです。 2D 変形の座標軸は、x 軸と y 軸のみを持つ平面です。一方、3D 変形の座標軸は、x、y、z 軸で構成される 3 次元空間であり、x 軸が正です。 y 軸は正、z 軸はそれぞれ画面の右方向、下方向、外方向です

遠近感

遠近感は、Transform 3D の最も重要な内容です。パースが設定されていない場合、要素の 3D 変形効果は得られません。

//下面以rotateX()旋转函数为例，rotateX(45deg)表示元素以X轴方向为轴沿顺时针旋转45角度//左图是无变形和透视样式的原始效果，中图是设置变形和透视样式的效果，右图是设置变形但未设置透视样式的效果

上の 3 つの図は、パースペクティブが設定されていない場合、ブラウザは要素の 3D 変形操作を 2D ビュー平面に垂直に投影し、最終的に表示されるのは幅と高さだけであることを示しています。要素の変更

遠近法を深く理解するには、観察者、遠近法要素、変換要素の概念を理解する必要があります。

まずtransform要素はその名の通りtransform3D変形を行う要素で主にtransform、transform-origin、backface-visibilityなどの属性を設定します。

オブザーバーは、遠近法要素を観察するためにブラウザによってシミュレートされたサイズのない点であり、光を放射する点光源と同様に、視線を放射します。

パースペクティブ要素は、さまざまな属性設定に応じて、変形された要素自体、またはその親要素または祖先要素 (後で詳しく紹介します) として使用されます。視点原点などの属性の設定

視点距離

視点距離とは、z 軸に平行な観察者の視線と画面の間の距離を指し、視距離と呼ばれます

perspective

値：なし | 観察者と画面の距離が0の場合、または画面の奥にある場合、視点要素の正面を観察することができないため、0と負の数になります

【注意】パーセンテージには相対要素が必要なのでパーセンテージではありませんが、z 軸には相対要素サイズがありません

【1】一般に物体は遠くにあるほど小さく見えます。パースペクティブ属性に反映され、属性値が大きいほど、要素の 3D 効果が目立たなくなります。 (人物に近ければ毛穴まで見えるのと同じように、遠ければ輪郭しか見えない場合もあります)

【2】パースペクティブ属性が設定された要素は、遠近感要素。通常、このプロパティは、変形された要素の親または祖先にのみ設定できます。なぜなら、ブラウザはその子の変形に対して遠近効果を生成しますが、それ自体に対しては遠近効果を生成しません

<!-- 在本身元素上设置透视无效果 --><div style="float:left;margin-right: 10px;border:2px solid gray;">    <div style="perspective: 200px;width: 100px;height: 100px;border:1px solid black;background-color: pink;transform: rotateX(45deg);"></div></div><!-- 在父级元素上设置透视有效果 --><div style="perspective: 200px; float:left;margin-right: 10px;border:2px solid gray;">    <div style="width: 100px;height: 100px;border:1px solid black;background-color: lightblue;transform: rotateX(45deg);"></div></div>

遠近原点perspective-originは観察者の位置を指します。 、一般に地面、観察者は画面に平行な別の平面上に位置し、観察者は常に画面に対して垂直です。観測者のアクティブ領域は観測要素のボックスモデル領域です

perspective-origin 値: x-axis y-axis

初期値: 50% 50%

適用先:非インライン要素 (block、inline -block、table、table-cell などを含む)

継承：なし

x轴: left | right | center | <percentage> | <length>y轴: top | bottom | center | <percentage> | <length>

【1】キーワード

x轴    left: 0% center: 50% right: 100%y轴    top: 0% center: 50% bottom: 100%

【2】値

x -軸の値は、x 軸上の 0 から離れた点を表します (要素の境界線の外側の左上隅のオフセット)。y 軸の値は、y 軸上の 0 点からのオフセットを表します

【 3]パーセント

X軸のパーセンテージはピボットされた要素の幅と(幅+水平方向のパディング+水平方向の境界線)に相対し、Y軸のパーセンテージはピボットされた要素の高さと( height+vertical Padding+vertical border)

【4】単一の値

値が1つしかない場合は2番目の値がデフォルトになる centerの場合

【注意】perspective-originはperspectiveが存在する要素に定義する必要がありますset, that means it must be set on theparent element or ancestor element of the element

変形関数

パースを導入したら、次は変形3Dの変形機能と変形原点について詳しく紹介します。前回のブログ記事では2d変形機能について詳しく紹介しました。 3D 変形機能も同様で、移動、回転、スケーリングを含みますが、傾きはありません。

　　[注意]倾斜skew()是二维变形，不能在三维空间变形，元素可能会在x轴和y轴倾斜，但不能在z轴倾斜

矩阵matrix3d

　　3d变形函数位移、旋转和缩放都是通过矩阵设置不同的参数而实现的。相比于2d矩阵martrix()的6个参数而言，3d矩阵matrix3d却有12个参数。其变形规则与2dmatrix()类似，只不过是从3*3矩阵，变成了4*4矩阵

matrix3d(a,b,c,0,d,e,f,0,g,h,i,0,j,k,l,1)

3d位移

　　3d位移函数主要包括traslateZ()和translate3d()

translate3d(x,y,z)

　　[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

traslateZ(z)相当于translate3d(0,0,z)

　　[注意]常用-webkit-transform: translateZ(0);来开启硬件加速

　　[注意]3d位移函数相当于matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)

3d缩放

　　3d缩放函数主要包括scaleZ()和scale3d()

scale3d(x,y,z)

　　默认值为scale3d(1,1,1)，当参数为负值时，先翻转再缩放

scaleZ(z)相当于scale3d(1,1,z)

　　[注意]3d位移函数相当于matrix3d(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)

　　[注意]scaleZ()和scale3d()单独使用时没有任何效果

.box1 .in{    transform: translateZ(-500px);}.box2 .in{    transform: translateZ(-100px);}.box3 .in{    transform: scaleZ(5) translateZ(-100px);}

//下图中从左到右分别是box1,box2,box3。由此得知，box3也相当于向z轴移动了-500px

　　所以transform: scaleZ(5) translateZ(-100px)和transform: translateZ(-500px)是等价的

3d旋转

　　3d旋转函数主要包括rotateX()、rotateY()、rotateZ()、rotate3d()

rotate3d(x,y,z,Ndeg)

　　x、y、z分别用来描述围绕x、y、z轴旋转的矢量值。最终变形元素沿着由(0,0,0)和(x,y,z)这两个点构成的直线为轴，进行旋转。当N为正数时，元素进行顺时针旋转；当N为负数时，元素进行逆时针旋转

rotateX(Ndeg)相当于rotate3d(1,0,0,Ndeg)

rotateY(Ndeg)相当于rotate3d(0,1,0,Ndeg)

rotateZ(Ndeg)相当于rotate3d(0,0,1,Ndeg)

透视函数

　　上面详细介绍了透视属性perspective，但透视属性应用在变形元素的父级或祖先级。而透视函数perspective()是transform变形函数的一个属性值，应用于变形元素本身

　　[注意]由于透视原点perspective-origin只能设置于设置了perspective透视属性的元素。若为元素设置透视函数perspective()，则透视原点不起使用，观察者使用默认位置，即元素中心点对应的平面上

perspective()

　　透视函数perspective()的参数只能是长度值，长度值只能是正数

　　[注意]由于transform属性是从前向后的顺序解析属性值的，所以一定要把perspective()函数写在其他变形函数前面，否则将没有透视效果

变形原点

　　变形2d时已经讲过变形原点，2d变形原点由于没有z轴，所以z轴的值默认为0。而3d变形原点的z轴是一个可以设置的变量

transform-origin

　　值: x轴 y轴 z轴

　　初始值: 50% 50%

　　应用于: 非inline元素(包括block、inline-block、table、table-cell等)

　　继承性: 无

　　[注意]IE9-浏览器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀，其他更高版本浏览器可使用标准写法

x轴: left | center | right | <length> | <percentage>y轴: top | center | bottom | <length> | <percentage>z轴: <length>

　　对于x轴和y轴来说，可以设置关键字和百分比，分别相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

//变形元素默认样式是 transform:rotate3d(1,1,1,45deg);

背景可见

　　元素的背面默认是可见的。但有时需要让元素背面不可见，这就要用到属性backface-visibility

backface-visibility: 设置元素背面是否可见

visible:可见，默认hidden:不可见

//设置一个元素包含两个半透明子元素绝对定位重叠，内容分别为A和B，来表示一个元素的正面和背面

　　[注意]若一个元素覆盖于另一个元素上，不仅仅是正面覆盖，背面也是覆盖的

变形风格

　　变形风格transform-style允许变形元素及其子元素在3d空间中呈现。变形风格有两个值。flat是默认值，表示2d平面；而perserve-3d表示3d空间

　　[注意]当设置了overflow:非visible或clip:非auto时，transform-style:preserve-3d失效

transform-style: flat | preserve-3d