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

投稿日: 2022-04-20 2022-10-09
タグ: css

この記事では、CSSの使用方法を学びます translateZ() 関数。多くの点で、これは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);
}

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

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

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

これの意味は 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);
}

デモ時間

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

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の視覚空間として見るための足がかりです。うまくいけば、それをツールボックスに追加して、魅力的なデザインを作成するのに役立つでしょう！

に関するドキュメントについては、MDNにアクセスしてください。 translateZ と perspective 📦🔍

getdocs

13036