CSS 3D 보기 속성 해석: 변환 및 원근감-CSS 튜토리얼-php.cn

CSS 3D 보기 속성 해석: 변환 및 원근감

WBOY

풀어 주다： 2023-10-24 08:11:09

원래의

1231명이 탐색했습니다.

CSS 3D 视图属性解读：transform 和 perspective

CSS 3D 보기 속성 해석: 변환 및 원근감, 특정 코드 예제가 필요합니다.

소개:
현대 웹 디자인에서 3D 효과는 매우 인기 있는 요소가 되었습니다. CSS의 변환 및 원근 속성을 통해 웹 페이지에 3D 시각 효과를 쉽게 추가하여 웹 페이지를 더욱 생생하고 매력적으로 만들 수 있습니다. 이 문서에서는 이러한 두 가지 속성을 설명하고 구체적인 코드 예제를 제공합니다.

1. 변환 속성:
변환 속성은 CSS에서 매우 강력한 속성으로 요소의 회전, 크기 조정, 이동 및 기울기와 같은 다양한 변환 작업을 실현할 수 있습니다. 3D 보기에서는 변환 속성을 사용하여 3D 공간의 요소를 변환할 수 있습니다.

다음은 일반적으로 사용되는 변환 함수입니다.

Rotation:
transform:rotateX(45deg); // X축을 중심으로 45도 회전
transform:rotateY(45deg) //Y축을 중심으로 45도 회전
transform: RotateZ(45deg); // Z축을 중심으로 45도 회전
Scale:
transform: scale(2); // X축과 Y축을 두 번 확대합니다.
transform: scaleX(2); X축에서 두 번 확대
transform: scaleY(2); // Y축에서 두 번 확대
Move:
transform:transformX(100px) //X축에서 100픽셀 이동
transform:transformY(100px) ; / / Y축으로 100픽셀 이동
transform:translateZ(100px); //Z축으로 100픽셀 이동
Tilt:
transform:skewX(45deg) //X축을 따라 45도 기울이기
transform :skewY( 45deg); // Y축을 따라 45도 기울입니다

다양한 변형 기능을 결합하여 복잡한 3D 변형 효과를 얻을 수 있습니다. 예를 들어 회전, 크기 조정 및 이동을 사용하여 3D 큐브를 만들 수 있습니다.

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face left">Left</div>
  <div class="face right">Right</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>

로그인 후 복사

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  transform: translateX(100px) rotateY(90deg);
}

.top {
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
}

로그인 후 복사

이 코드는 모든 면이 반투명 검정색 배경색을 갖는 200x200 픽셀 큐브를 만듭니다. 3D 공간에서 각 면의 변형은 변형 속성을 통해 달성할 수 있습니다. 예를 들어, 면 중 하나에translateZ(100px)를 지정하면 시점을 기준으로 100픽셀 앞으로 이동하여 큐브의 앞면을 형성할 수 있습니다.

2. 원근 속성:
원근 속성은 요소의 원근 효과를 설정하는 데 사용됩니다. 원근 지점의 위치와 관찰 거리를 설정하면 3D 변환 효과의 성능에 영향을 줄 수 있습니다. Perspective는 변환 속성과 함께 사용해야 합니다.

원근 속성을 설정하여 요소가 3D 공간에서 원거리 및 근거리 효과를 생성하도록 할 수 있습니다. 예:

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform: rotateX(45deg) rotateY(45deg);
  transform-style: preserve-3d;
  perspective: 1000px;
}

로그인 후 복사

이 예에서는 관점을 1000px로 설정하여 요소에 1000픽셀 거리 효과를 제공합니다. 원근 값을 변경하여 3D 공간에서 요소의 거리를 조정할 수 있습니다.

요약:
CSS의 변환 및 원근 속성을 사용하면 웹 페이지에 3D 효과를 쉽게 추가할 수 있습니다. 변환 속성은 3D 공간에서 요소의 회전, 크기 조정, 이동 및 기울기와 같은 변환 작업을 구현할 수 있습니다. 관점 속성은 3D 공간에서 요소의 관점 효과를 제어할 수 있습니다. 이 두 가지를 결합하면 풍부하고 다양한 3D 효과를 만들 수 있습니다.

참조: