CSStranslateZ（）とperspective（）を使用するための秘訣

この記事では、CSStranslateZ()関数の使用方法を学習します。多くの点で、これはWebページが単なる2D視覚空間であるという考えに異議を唱えるため、独自のCSS関数です。

CSS transform プロパティには、HTMLElementsを移動するための多くの関数があります。その中には、translateX、translateY、およびtranslateZ機能があります。

translateXとtranslateYは非常に単純ですが、translateZは少しわかりにくいです。

translateXとtranslateYがどのように機能するかを確認しましょう。

div#myCircle {
  background-color: gray;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  transform: translateX(11px) translateY(20px);
}

HTMLElementが11px右に移動し、20px下に移動します。

x軸とy軸に沿って移動しています。あなたは高校の数学の授業からこれらの用語を覚えているかもしれません！ translateZ関数が移動する軸を推測しますか？

それは正しい！ z軸。 HTMLElementを水平/垂直に移動する代わりに、HTMLElementをあなたに近づけたり、遠ざけたりします。

translateZ（）の使用

前のコードスニペットにtranslateZを追加してみましょう。

div#myCircle {
  background-color: gray;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  transform: translateX(11px) translateY(20px) translateZ(75px) perspective(200px);
}

perspective()と呼ばれる別のCSS関数に気づいたかもしれません。実際には、translateZを有効にする必要があります。 translateXもtranslateYも必要ないので、忘れがちです…しかし、translateZと一緒に使用することを忘れないでください！

パースペクティブ（）は何をしますか？

パースペクティブ（）関数は、コンピューター画面の平面とtranslateZを適用するHTMLElementとの間の仮想距離を定義します。

つまり、perspective(200px)とtranslateZ(75px)は、HTMLElementとコンピューター画面の間に 200px の仮想空間を作成し、それを75pxより近くに移動します。

これにより、HTMLElementが大きく表示されます💗

同様に、translateZ()で負の値を使用すると、さらに遠くに移動します。

div#myCircle {
  background-color: gray;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  transform: translateX(11px) translateY(20px) translateZ(-100px) perspective(200px);
}

デモ時間

これは、translateZCSS関数を使用する小さなデモです。ボタンの上にマウスを置いてみてください！

button {
  /* abridged css values */
  transform: perspective(100px) translateZ(0px);
  transition: transform 100ms linear;
}

button:hover {
  transform: perspective(100px) translateZ(5px);
}

translateZを使用すると、魅力的な視覚効果を簡単に作成できます。

translateZ（）に関する興味深いファクトイド

perspectiveおよびtranslateZには、注意すべき予期しない動作がいくつかあります。

translateZ（）に提供された値がperspective（）に提供された値以上の場合、HTMLElementは表示されなくなります。 translateZ()ではいつでも無限に小さい値を設定できますが、逆は真ではありません…perspective()の値を超えると、要素は表示されなくなります。
perspective（0px）を適用しています。 perspective()の任意の値は、ゼロ値でない限り機能します（0px、0、0emなど）。これにより、translateZ()の効果は無視されます。

結論

translateZを使用することは、Webページを2Dだけでなく3Dの視覚空間として見るための足がかりになります。うまくいけば、それをツールボックスに追加して、魅力的なデザインを作成するのに役立つでしょう！

translateZおよびperspectiveのドキュメントについては、MDNにアクセスしてください📦🔍