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

CSS 3D 변환 속성: 변환 및 원근감

王林

풀어 주다： 2023-10-26 08:54:30

원래의

1423명이 탐색했습니다.

CSS 3D 变换属性：transform 和 perspective

CSS 3D 변환 속성: 변환 및 원근감, 특정 코드 예제 필요

CSS 3D 변환 속성은 몇 가지 간단한 코드로 놀라운 시각적 효과를 얻을 수 있는 강력한 기술입니다. 그중 가장 일반적으로 사용되는 두 가지 속성은 변환(Transform)과 원근감(Perspective)입니다.

1. 변환 속성

변환 속성은 요소에 대한 회전, 크기 조정, 기울이기, 이동 및 기타 작업에 사용됩니다. 다양한 매개변수를 설정하여 다양한 효과를 얻을 수 있습니다.

Rotation

회전 매개변수를 설정하여 요소를 회전할 수 있습니다. 예:

div {
  transform: rotate(45deg);
}

로그인 후 복사

Scale

scale 매개변수를 설정하여 요소의 크기를 조정할 수 있습니다. 예:

div {
  transform: scale(1.5);
}

로그인 후 복사

skew

기울기 매개변수를 설정하여 요소를 기울일 수 있습니다. 예:

div {
  transform: skew(30deg);
}

로그인 후 복사

Move

번역 매개변수를 설정하여 요소를 이동할 수 있습니다. 예:

div {
  transform: translate(100px, 50px);
}

로그인 후 복사

2. 원근 속성

원근 속성은 3차원 장면에서 관찰 지점을 정의하는 데 사용되며 요소의 원근 효과에 영향을 줍니다. 다양한 매개변수를 설정하여 요소의 관점을 변경할 수 있습니다.

div {
  perspective: 800px;
}

로그인 후 복사

perspective 속성을 설정한 후 요소의 하위 요소에 관점 효과를 적용하려면 변형 스타일 속성을 사용해야 합니다.

div {
  perspective: 800px;
  transform-style: preserve-3d;
}

로그인 후 복사

3. 예제에 적용

다음은 큐브 효과를 얻기 위해 변환 및 관점 속성을 사용하는 방법을 보여주는 예제입니다.

HTML 코드는 다음과 같습니다.

<div class="cube">
  <div class="face front">前</div>
  <div class="face back">后</div>
  <div class="face left">左</div>
  <div class="face right">右</div>
  <div class="face top">上</div>
  <div class="face bottom">下</div>
</div>

로그인 후 복사

CSS 코드는 다음과 같습니다.

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 100px auto;
  perspective: 800px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  animation: spin 6s linear infinite;
}

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

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

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

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

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

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

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

@keyframes spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

로그인 후 복사

위 코드는 간단한 큐브를 구현하고 변형 및 원근 속성을 통해 회전 및 원근 효과를 얻습니다. 코드를 직접 실행하여 효과를 확인할 수 있습니다.

결론적으로 CSS 3D 변환 속성인 변환과 원근감은 절묘한 시각 효과를 만드는 데 중요한 도구입니다. 간단한 코드로 다양한 멋진 애니메이션 효과를 얻고 웹 페이지의 시각적 매력을 향상시킬 수 있습니다.

위 내용은 CSS 3D 변환 속성: 변환 및 원근감의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!