Transform 3D

要素の3 D変換効果の処理方法について説明します.

パース(投影点)

表示者の位置を推定して投影点を指定することで、3 D環境を作成できます.つまり、離れたものが小さくなり、近づいたものが大きくなり、遠近感を生む効果があります.

perspective property

パース距離を値として指定するには、パース効果要素の親要素にパース属性を指定します.
同じピボット効果をサブエレメントに簡単に適用できます.

.container {
  width: 150px;
  height: 150px;
  border: 4px solid;
  margin: 100px;
  /* 원근효과를 위한 요소의 상위요소에 지정  */
  perspective: 300px;

  /* 원근효과의 기준점 */
  perspective-origin: 50% 50%;
}

.container .item {
  width: 150px;
  height: 150px;
  background-color: orange;
  transition-duration: 1s;
}

.container .item:hover {
  transform: rotateY(45deg);
}

perspective-origin

上記のコードのperspectiveに関連するプロパティは、パースビューの開始の基点を指定するために使用されます.デフォルト値が50%の要素の中心は、x軸とy軸に相当します.

perspective-origin: 50% 50%;

transform: perspective

サブエレメントにパースビューの投影点を設定すると、perspetive関数がサブエレメントの変換プロパティの値として与えられ、カッコに数値が入力されます.

.container {
  width: 150px;
  height: 150px;
  border: 4px solid;
  margin: 100px
}

.container .item {
  width: 150px;
  height: 150px;
  background-color: orange;
  /* 요소 정렬 기준 지정 */
  /* 기본값 요소 한가운데 */
  /* transform-origin: 50% 50%; */
    
  transition-duration: 1s;
  transform-origin: 100% 50%; 
}

.container .item:hover {
  /* 요소 정가운데 기준으로 회전 */
  /* transform: rotate(45deg); */
  transform: perspective(300px) rotateY(45deg);
}

transform-style

CSSの親要素に3 D変換効果が適用されている場合、既定では、3 D変換効果は子要素に適用されます.このために使用される属性はtransform-style属性である.
この点は、最初のサブアイテムにのみ適用され、必要に応じてプロパティ値を繰り返し使用する必要があります.

.container {
  width: 150px;
  height: 150px;
  border: 4px solid;
  margin: 100px;
  perspective: 300px;
}

.container .item {
  width: 150px;
  height: 150px;
  background-color: orange;
  transform: rotateY(45deg);
  /* transform-style: flat; 기본값으로 flat으로 위에서 설명한 하위 요소의 3차원 변환효과를 막는다. */
  transform-style: preserve-3d; /* 하위 요소의 3차원 변환효과를 적용하게 해준다. */
}

.container .item .box {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  transform: rotateX(45deg);
}

backface-visibility

エレメントの背面を表示するかどうかを設定します.
高度3 Dの効果は、次の方法で実現できます.