C3でのさまざまな変換の詳細な説明
目次
- 変換
- 2D変換
- モバイル
- スピン
- 2D変換の中心点
- ズーム
- 2D変換の複合書き込み
- 3D変換
- モバイル
- 視点
- スピン
- モバイル
- 3Dレンダリング
変換
-
変換はCSS3の破壊的な機能の1つであり、要素の変位、回転、スケーリングの効果を実現できます。トランジションは通常、トランジションと組み合わせて使用されます。このようなトランジションは、より継続的で楽しいものです。
-
属性：
- 移動：翻訳
- 回転：回転
- スケール：スケール
-
分類：
- 2D変換
- 3D変換
2D変換
- モバイルの2D変換
- 2D変換の回転
- 変換中心点を設定する
- 2D変換ズーム
1. 2D変換の動き（翻訳）
-
2D変換での移動はポジショニングに似ており、ページ上の要素の位置を変更できます。
-
変換の最大の利点は、他の要素の位置に影響を与えないことです。変換のパラメーターがパーセンテージで記述されている場合、それはそれ自体の要素に対して移動します。
-
文法：
transform: translateX(n); 在X轴上移动的距离。 transform: translateY(n); 在Y轴上移动的距离。 也可以合起来写。 transform: translate(X,Y); transform: translate(50%,50%); 在X轴和Y轴上移动自身宽度和高度的50% -
次のコードは、幅200ピクセルの2つのdivを提供し、最初のdivに移動を追加します。X軸は30ピクセル移動し、Y軸は30ピクセル移動します。
没有添加移动属性 <style> div { width: 200px; height: 200px; background-color: pink; } div:last-child { background-color: purple; } </style> <div></div> <div></div>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div:last-child {
background-color: purple;
}
添加移动属性
div:first-child {
transform: translate(30px, 30px);
}
</style>
<div></div>
<div></div>
2. 2D変換の回転（回転）
-
2D回転とは、要素を2次元平面内で時計回りまたは反時計回りに回転させることです。
-
文法：
transform: rotate(旋转度数); -
注意：
- 回転の角度をrotateで記述します。単位はdeg（度）です。たとえば、rotate（90deg）です。
- 回転角が正の場合、回転方向は時計回りです。回転角が負の場合、回転方向は反時計回りです。
- デフォルトの回転中心点は、要素の中心点です
-
次のコードの効果は次のとおりです。マウスを画像の上に置くと、画像は時計回りに360度回転します。アニメーション効果を増やすために、遷移効果が追加されています。
<style> img { width: 200px; height: 200px; border-radius: 50%; border: 5px solid #ccc; /* 过渡 */ transition: all 0.3s; } /* 顺时针旋转360° */ img:hover { transform: rotate(360deg); } </style> <img src="../1613787740511.jpg" alt="">
2D変換の中心点（変換元）
-
文法：
transform-origin: x y; -
パラメータは、パーセンテージ、ピクセル、または方向名詞にすることができます
-
xyのデフォルト変換の中心点は、要素の中心点です（50％50％）
-
xy（左上左右中央）のピクセルまたは位置名詞を設定できます
3.2D変換のスケール
-
ズームは、その名前が示すように、ズームインおよびズームアウトできます。この属性を要素に追加する限り、ズームインするかズームアウトするかを制御できます。
-
文法：
transform: scale(x,y); 其中x y 表示缩放倍数 transform:scale(1,1)︰宽和高都放大一倍，相对于没有放大 transform:scale(2,2)∶宽和高都放大了2倍 transform:scale(2)∶只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2) transform:scale(0.5,0.5):缩小 -
sacleズームの特徴：変換中心点ズームを設定できます。デフォルトのズームは中心点に基づいており、他のボックスには影響しません。
2D変換の複合書き込み
-
複数の変換が同時に含まれる場合は、それらを組み合わせて書き込むことができます。
-
文法：
transform: translate() rotate() scale(); -
変換の順序は、変換の効果に影響します。たとえば、最初の回転は座標軸の方向を変更します。
-
ディスプレイスメントと他の属性を同時に持つ場合、ディスプレイスメントを前面に配置する必要があります。そうしないと、予期しない状況が発生します。
3D変換
モバイルの3D変換（translate3d）
-
3D移動は、z軸方向である2D移動に移動可能な方向を追加します。
-
文法：
translform:translateX(100px); 在x轴上移动移动100px translform:translateY(100px); 在Y轴上移动100px translform:translateZ(100px); 在Z轴上移动100px 当然也可以复合来写： transform:translate3d(x,y,Z); 其中x、y、z分别指在x y z 轴上移动的距离 -
次のコードは、マウスがdivに移動したときの3D移動を設定するためのものです。
div { width: 100px; height: 100px; background-color: #c0ffc6; transition: all .5s; } div:hover { transform: translate3d(400px, 100px, 100px); } <div></div>
効果は次のとおりです。
- 誰かが尋ねるかもしれません、これと2Dモバイルの違いは何ですか？もちろん、この例は実際には3Dパースペクティブをまったく示していません。？？何、ブロガーはだましているのですか？？？もちろん、あなたが考えて、我々はすべてのある3Dの世界で直感的に感じていないの遠く、近くに、そして小さな我々は3Dで動いているので、以来、私たちはこの気持ちを持っている必要があり、したがって、我々はと呼ばれる概念を導入しているパースペクティブを視点。
展望
-
その機能は、2D平面上にほぼ大小のビジョンを生成することです。しかし、このほぼ大小の効果は2次元です。理解できない場合でも、心配しないで、例を見てみましょう。
-
注意：
- Webページに3D効果を生成する場合は、遠近法（2D平面に投影された3Dオブジェクトとして理解される）が必要です。
- 遠近法は視覚距離とも呼ばれます。視覚距離は人間の目と画面の間の距離です。
- 遠近法の単位はピクセルです
- 観測された要素の親ボックスに書き込まれたパースペクティブ
-
上記の例でも、ボディにはdivしかないため、divの親要素にパースペクティブを追加します。したがって、divの親要素はボディであるため、ボディにパースペクティブを追加します。
body { /* 透视，像素大小自己把握 */ perspective: 200px; } div { width: 100px; height: 100px; background-color: #c0ffc6; transition: all .5s; } div:hover { transform: translate3d(400px, 100px, 100px); } <div></div>
効果は次のとおりです。
3D変換の回転（rotate3d）
-
3D回転とは、要素を3次元平面内で、x軸、y軸、z軸、またはカスタム軸に沿って回転できることを意味します。
-
文法：
transform:rotateX(90deg); 沿着x轴正方向旋转90° transform:rotateY(90deg); 沿着y轴正方向旋转90° transform:rotateZ(90deg); 沿着Z轴正方向旋转90° 顺时针 -
長い間話し合った後、どのように前向きな方向を区別しますか？
-
注：私たちのコンピューターでは、コンピューター画面の左上隅が座標原点、右の水平方向がX軸の正の方向、X軸の下向きの垂直方向がY軸の正の方向です。画面に垂直な外側は、Z軸の正の方向です。
左手法则：张开左手，让大拇指指向坐标轴的正方向，四指弯曲的方向为正方向。例如：顺时针方向为Z轴的正方向
-
-
もちろん、3D回転を組み合わせて次のように書くこともできます。
-
transform:rotate3d(x,y,z,90deg); 沿着自定义轴旋转90deg transform: rotate3d(1, 0, 0, 90deg); 在X轴方向旋转90° transform: rotate3d(0, 1, 0, 90deg); 在y轴方向旋转90° transform: rotate3d(1, 1, 0, 90deg); 在X轴和y轴正方向的角平分线方向旋转90° 这里涉及矢量的合成，因为在X轴和Y轴上要同时旋转，X轴和Y轴矢量合成后为X轴和y轴正方向的角平分线。 -
ケース：ボックスはX軸の正の方向に沿って45°回転します
body { perspective: 300px; } div { width: 200px; height: 200px; margin: 100px auto; background-color: #3be840; transition: all 1s; } div:hover { transform: rotateX(45deg); } <div></div>
[3Dレンダリング（トランスフロムスタイル）]
-
複数のオブジェクトを使用して回転すると、奇妙な現象が発生することがあります。回転は明確に設定されていますが、回転すると、子要素の回転属性が消えて機能しません。これは、3Dレンダリングを設定しなかったためです（ transfrom-style）であり、この属性のデフォルト設定はフラットです。つまり、オンになっていないため、子要素が3次元環境を開くことができるように、親要素を明示的に設定する必要があります。
-
文法：
transform-style: flat; 子元素默认不开启3d立体空间 transform-style: preserve-3d; 子元素开启立体空间 -
注：この属性は親要素に設定されますが、子要素に影響します。
-
例：
body { perspective: 500px; } .box { position: relative; width: 200px; height: 200px; margin: 100px auto; transition: all 1s; } .box:hover { transform: rotateY(60deg); } .box div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: pink; } .box div:last-child { background-color: purple; transform: rotateX(60deg); } <div class="box"> <div></div> <div></div> </div>
上記のコードは、.boxの3Dレンダリングを設定していません。効果は次のとおりです。
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 1s;
/* 让子元素保持3d立体空间环境 必须是直接父元素加，间接父元素加上不生效 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
<div class="box">
<div></div>
<div></div>
</div>
次のように3Dレンダリング効果を追加します。
