CSS 및 JavaScript로 3D 회전 회전 목마 구축

CSS 3D 변환 및 JavaScript를 사용하여 대화식 3D 회전 회전 목마를 구축하여 웹 이미지 또는 컨텐츠의 동적 디스플레이를 향상시킵니다. 이 기사에서는이 구성 요소를 만드는 방법을 단계별로 안내합니다.

이 주제를 처음 연구했을 때 3D 회전 목마가 필요하지 않았지만 특정 구현 세부 사항에 더 많은 관심을 기울였습니다. 핵심 기술은 물론 CSS 변환 모듈 레벨 1의 핵심 기술이지만 프로세스에서 CSS, SASS 및 클라이언트 JavaScript의 모든 측면을 포함하는 많은 다른 프론트 엔드 개발 기술이 적용됩니다. 이 코드 펜은 다양한 버전의 구성 요소를 보여 주며이를 빌드하는 방법을 보여 드리겠습니다.

CSS 3D 변환의 설정을 설명하기 위해 구성 요소의 순수한 CSS 버전을 보여 드리겠습니다. 그런 다음 JavaScript를 사용하여 간단한 구성 요소 스크립트를 개발하는 방법을 보여 드리겠습니다.

키 포인트

웹 페이지에 이미지 또는 컨텐츠를보다 동적으로 표시하기 위해 CSS 3D 변환 및 JavaScript를 사용하여 대화식 3D 회전 회전식을 만듭니다.

는 이미지 수에 기초한 다각형 근사치를 사용하여 원형 3D 공간에 이미지를 배열하여 회전 목마를 구성하고 JavaScript 향상을 통한 가시성 및 탐색을 제어합니다.

CSS에서 미디어 쿼리 및 백분율 기반 크기를 사용하여 회전식 그래프의 적응 형 디자인이 달성되므로 다양한 화면 크기 및 장치 방향에 적응할 수 있습니다.

HTML 및 JavaScript를 통해 내비게이션 컨트롤을 추가하여 사용자 상호 작용을 향상시켜 사용자가 회전식 맵 항목을 수동으로 루프 할 수 있습니다. 자동 재생, 전환 효과, 무한 루프 및 텍스트 또는 다른 모양 추가와 같은 고급 사용자 정의 옵션을 탐색하여 특정 설계 요구를 충족시키기위한 유연한 사용자 정의 옵션을 제공합니다.

문자 차트 마크

마크 업의 경우 구성 요소 내부의 이미지가
• 요소로 래핑되어 기본 프레임 워크를 제공합니다.
이것은 우리의 출발점이 될 것입니다.
회전 목마 그림의 기하학적 구조
CSS를보기 전에 다음 섹션에서 개발 될 계획을 간략하게 설명해 봅시다.
• 이 다각형의 수는 캐 러셀 다이어그램의 이미지와 동일합니다 회전 목마에 3 개 미만의 이미지가 있으면 어떻게해야합니까? 다각형을 정의 할 수 없으며 다음 프로세스를 그대로 적용 할 수 없습니다. 어쨌든, 두 개의 이미지가 하나만있는 것은 매우 쓸모가 없으며, 직경이있는 원의 반대쪽에 놓을 수 있습니다. 간단하게하기 위해, 이러한 특수한 경우는 처리되지 않으며 최소한 3 개의 이미지가 있다고 가정합니다. 그러나 관련 코드 수정은 어렵지 않습니다.
이 가상의 기준 다각형은 뷰포트 평면에 수직 인 3D 공간에 위치하고 중심을 화면으로 뒤로 밀면 거리는 중심 거리 (다각형의 한 가장자리에서 중앙까지의 거리)와 같습니다. , 아래 그림과 같이,

이런 식으로, 현재 뷰어 지향 가장자리는 화면 평면 z = 0에 있으며, 전면 이미지는 원근법 단축의 영향을받지 않으며 일반 2D 크기를 갖습니다. 그림의 문자 D는 CSS 관점 속성의 값을 나타냅니다.

회전 목마 그래프 기하 구조

를 구성하십시오 이 섹션에서는 주요 CSS 규칙을 보여 드리겠습니다. 단계별로 설명하겠습니다.

다음 코드 스 니펫에서 일부 SASS 변수를 사용하여 구성 요소를보다 쉽게 ​​구성 할 수 있도록하십시오. <p>를 사용하여 회전 목마의 이미지 수를 나타내고 이미지의 너비를 지정하기 위해 <strong>를 사용합니다. </strong> </p> <p> 요소는 첫 번째 이미지의 포함 상자이며 다른 이미지가 배치되고 변환되는 기준 요소이기도합니다. 이제 회전 목마에 표시 할 이미지가 하나만 있다고 가정하면 크기와 정렬로 시작할 수 있습니다. </p> <p> 요소는 규정 된 회전식 항목 너비를 가지며 이미지와 같은 높이를 갖습니다 (크기가 다를 수 있지만 종횡비가 동일해야합니다). 이러한 방식으로, 캐로 셀 컨테이너 높이는 이미지 높이에 따라 자동으로 조정됩니다. 또한 <is>는 수평으로 회전 목마 용기에 있습니다. <code>$n 첫 번째 이미지는 이미 대상 위치, 즉 회전 목마의 전면에 있기 때문에 추가 변환이 필요하지 않습니다. $item-width 는 요소에 회전 변환을 적용하여 3D 공간에서 회전 목마를 회전시킬 수 있습니다. 이 회전은 다각형의 중심 주위에 있어야하므로
의 기본 변환-오리진을 변경합니다.

이 값은 CSS에서 z 축의 양의 방향이 화면을 떠나 뷰어를 향하는 것이기 때문에이 값은 역전됩니다. SASS 구문 오류를 피하려면 괄호가 필요합니다. 다각형 구석 거리의 계산은 나중에 설명됩니다. <figure></figure> 요소의 기준 시스템을 변환 한 후, 전체 회전 목마는 (새로운) y 축 회전에 의해 회전 될 수 있습니다 : .

나는 나중에이 회전의 세부 사항을 반환 할 것이다.

<code class="language-html"><div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">
    ...
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">
  </figure>
</div></code>

다른 이미지를 계속 변환합시다. 절대 포지셔닝을 사용하여 이미지는 : 내부에 쌓입니다

z-index 값은 이후 변환의 예비 단계 일뿐 때문에 무시됩니다. 실제로, 각 이미지는 이제 배정 된 이미지의 다각형 모서리에 따라 회전식 이미지의 y 축 주위에서 각도를 회전시킬 수 있습니다. 먼저, 요소와 마찬가지로 이미지의 기본 변환-오리핀을 수정하고 다각형의 중심으로 이동하십시오 : .

<code class="language-html"><div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">
    ...
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">
  </figure>
</div></code>

이미지는 라디안에 의해 제공되는 새로운 y 축에 대한 수량을 회전시킬 수 있습니다. 수학 상수 π를 의미합니다. 따라서 두 번째 이미지는

회전하고 세 번째 이미지는 ($i - 1) * $theta 회전하고 마지막 이미지가 회전 할 때까지 회전합니다. $i $theta = 2 * $PI / $n $PI 중첩 CSS 변환의 계층 적 특성으로 인해이 이미지의 상대적 배열은 회전식 맵 회전 중에 보존됩니다 (즉, 의 수정 된 y 축에 대한 회전). $theta 이 이미지의 회전량은 sass 2 * $theta

이것은 에 대해 인덱스 변수 ($n - 1) * $theta에 지정된 마지막 값은 n 대신 n-1이기 때문에 대신 구조를 사용하는 것입니다.

sass ' 보간 구문의 두 인스턴스에 주목하십시오. 첫 번째 경우, 선택기를 색인화하는 데 사용됩니다.

<figure></figure>를 계산합니다 다각형의 편도 거리의 계산은 가장자리의 수와 가장자리의 폭 공식은 다음과 같습니다

여기서 @for는 탄젠트 삼각 함수입니다.

이 공식은 일부 기하학과 삼각법을 통해 도출 될 수 있습니다. 펜의 소스 코드 에서이 공식은 탄젠트 함수를 SASS로 사용할 수 없으므로 하드 코드 값을 사용하기 때문에 구현되지 않습니다. 대신, 공식은 JavaScript 데모에서 완전히 구현됩니다.

<code class="language-css">.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}</code>

간격 회전 목마 항목 for...through for...to 이 시점에서, 회전식 이미지는 나란히 "스티치"되어 원하는 다각형 모양을 형성합니다. 그러나 여기서, 그것들은 단단히 쌓여 있으며, 3D 회전 목마에는 보통 그들 사이에 공간이 있습니다. 이 거리는 3D 공간의 인식을 향상시킵니다. 캐 러셀의 뒤쪽을 향한 이미지를 볼 수 있습니다. for...to 다른 구성 변수를 도입하고 각 요소에 대한 수평 채우기로 사용하여 이미지 간의 간격을 선택적으로 추가 할 수 있습니다. 더 정확하게는이 값의 절반을 왼쪽과 오른쪽 채우기로 가져옵니다. $i 최종 결과는 다음 데모에서 볼 수 있습니다. 이미지는 속성을 ​​사용하여 반투명이되어 회전식 구조를 더 잘 설명하고 회전식 루트 요소의 플렉스 레이아웃은 뷰포트의 수직으로 중심으로 사용됩니다.

회전 회전 목마 그림 #{} 테스트 캐 러셀 이미지 회전을 용이하게하기 위해 이미지 사이에서 앞뒤로 탐색하기 위해 UI 컨트롤을 추가합니다. (회전 캐 러셀 이미지를 표시하려면 여기에 코드펜 링크를 삽입해야합니다. 우리는

정수 변수를 사용하여 회전 목마 앞에 어떤 이미지가 있는지 나타냅니다. 사용자가 이전/다음 버튼과 상호 작용할 때이 변수는 한 단위로 증가하거나 감소합니다. currImage 업데이트 이후, 회전식 이미지 회전은 다음과 같은 방식으로 수행됩니다.

(여기 및 다음 코드 스 니펫에서 ES6 템플릿 리터럴을 사용하여 문자열에 표현식을 삽입하십시오. 원하는 경우 기존의 "" "컨 컨트레이션 연산자)

를 사용할 수 있습니다. currImage 여기서

는 이전과 동일합니다

<code class="language-html"><div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">
    ...
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">
  </figure>
</div></code>

회전은 다음 항목으로 이동하기 위해서는 시계 반대 방향으로 회전해야 하며이 회전 값은 CSS 변환에서 음수입니다.
값은

범위에 국한되지 않지만 긍정적 인 방향과 부정적인 방향으로 무한히 자랄 수 있습니다. 실제로, 프론트 이미지가 마지막 (SO )이고 사용자가 다음 버튼을 클릭하면 첫 번째 회전식 이미지 전에 를 0으로 재설정하면 회전 각도는 theta에서 0으로 변환됩니다. , 이는 이전 이미지에서 회전 목마를 반대 방향으로 회전시킵니다. 전면 이미지가 첫 번째 이미지 인 경우 이전 버튼을 클릭하면 비슷한 문제가 발생합니다.

까다 롭기 위해서는 데이터 유형이 임의로 큰 값을 취할 수 없기 때문에

<code class="language-css">.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}</code>

의 잠재적 오버플로를 확인해야합니다. 이 검사는 데모 코드에서 구현되지 않습니다.

JavaScript -theta 로 향상되었습니다 회전식 그래프의 핵심을 형성하는 기본 CSS를 본 후, 이제 와 같은 JavaScript를 사용하여 다양한 방식으로 구성 요소를 향상시킬 수 있습니다.

모든 이미지 폭 페이지의 여러 회전 회전 목마 인스턴스 갭 크기 및 등 가시성과 같은 각 인스턴스의 구성 currImage HTML5 Data-* 속성을 사용한 구성 속성 [0, numImages – 1] currImage == n-1 먼저, 스타일 시트에서 원점과 회전을 변환하는 것과 관련된 변수와 규칙을 제거합니다. 이는 JavaScript를 사용하여 수행됩니다. 다음으로, 스크립트의 currImage 함수는 인스턴스 초기화를 담당합니다. (n-1)*theta
매개 변수는 회전식 다이어그램을 저장하는 DOM 요소를 나타냅니다.

일반적 으로이 함수는 페이지의 각 회전 목마 그래프에 대한 객체를 생성하는 생성자이지만 여기에는 회전식 라이브러리를 작성하지 않으므로 간단한 기능으로 충분합니다. currentImage 동일한 페이지에서 여러 구성 요소를 인스턴스화하려면 코드는 모든 이미지가로드 될 때까지 대기하고 Number 객체에 대한

이벤트에 대한 리스너를 등록한 다음 각 요소에 대해 클래스 <:> :

세 가지 주요 작업을 수행하십시오 :

탐색 설정. 이것은 두 번째 CodePen 데모에 설명 된 것과 동일한 코드입니다.
• 설정 설정 레인지 윈도우 윈도우 크기 리스너 크기 청취자는 캐 러셀 그래프를 새 뷰포트 크기에 적응시키기 위해 적응력을 유지하도록합니다.
변환 설정 코드를 확인하기 전에 몇 가지 주요 변수와 인스턴스 구성을 기반으로 초기화하는 방법을 다룹니다.
• 이미지 수 (n)는 요소의 자식 요소의 수에 따라 초기화됩니다. 슬라이드 (갭) 사이의 간격은 html5
속성 (세트)에서 초기화됩니다. 후면 가시성 플래그 (BFC)는 html5의 CSS 변환 세트
CSS 변환 관련 속성을 설정하기위한 코드는 에 캡슐화됩니다. 이 중첩 함수에는 두 개의 매개 변수가 있습니다. 첫 번째는 회전 목마 그래프의 항목 수, 즉 위에서 소개 된 N 변수입니다. 두 번째 매개 변수 S는 회전식 다각형의 측면 길이입니다. 앞에서 언급했듯이 이것은 이미지의 너비와 같으므로

: 를 사용하여 그 중 하나의 현재 너비를 읽을 수 있습니다.

이런 식으로, 백분율 값을 사용하여 이미지 너비를 설정할 수 있습니다.

<code class="language-html"><div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">
    ...
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">
  </figure>
</div></code>

회전 목마 그래프를 적응력있게 유지하기 위해 창 크기 조정 이벤트에 대한 리스너를 등록했습니다.

단순성을 위해, 나는 리스너를 해제하지 않았다. <figure></figure> data-gap 내가하는 첫 번째 일은 전달 된 매개 변수와 앞에서 논의 된 공식을 사용하여 다각형의 구형 거리를 계산하는 것입니다. dataset 이 값은 요소의

를 수정하여 캐 러셀의 새로운 회전 축을 얻는 데 사용됩니다.

다음, 이미지 스타일을 적용하십시오 : 첫 번째 루프는 회전식 항목 사이의 공간에 패딩을 할당합니다. 두 번째 루프는 3D 변환을 설정합니다. 관련 플래그가 회전식 다이어그램 구성에 지정된 경우 마지막 루프는 뒷면을 처리합니다. 마지막으로,

를 호출하여 현재 이미지를 전면으로 이동하십시오. 이것은 표시 될 이미지의 색인을 고려할 때 작은 도우미 기능입니다. y 축의

요소를 회전하여 대상 이미지를 전면으로 이동합니다. 내비게이션 코드는이를 사용하여 앞뒤로 이동합니다. setupCarousel() 이것은 최종 결과입니다. 각 회전식이 서로 다른 구성을 가진 여러 회전식이 인스턴스화되는 데모입니다. 소스와 결론 getComputedStyle() 끝이 끝나기 전에이 튜토리얼을 조사해 주신 몇 가지 소스에 감사드립니다. (참조 소스는 여기에 나열되어야합니다)

코드 또는 회전식 다이어그램의 기능에 대한 질문이나 의견이 있으시면 아래 메시지를 남겨주세요.

<code class="language-css">.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}</code>

CSS 및 JavaScript가있는 3D 로터리 회전식 다이어그램을 구축 할 때의 FAQ

3D 회전 회전식 회전식 다이어그램을 조정하는 방법은 무엇입니까?

3D 회전 회전식 카로셀 그래프에 적응하려면 CSS에서 미디어 쿼리를 사용하는 것이 포함됩니다. 미디어 쿼리를 사용하면 장치의 화면 크기에 따라 다른 장치에 다른 스타일을 적용 할 수 있습니다. 작은 화면에 맞게 회전식 그래프 요소의 크기와 위치를 조정할 수 있습니다. 또한 데스크탑 컴퓨터와 같은 호버 상태가 없으므로 모바일 장치의 터치 이벤트를 고려하십시오.

회전 목마에 더 많은 슬라이드를 추가 할 수 있습니까?

예, 회전 목마에 더 많은 슬라이드를 추가 할 수 있습니다. HTML 구조에서는 반지되지 않은 목록에 더 많은 목록 항목을 추가 할 수 있습니다. 각 목록 항목은 슬라이드를 나타냅니다. CSS에서 각 슬라이드의 회전 각도를 조정하여 3D 공간에 올바르게 배치해야합니다.

회전식 다이어그램에 탐색 버튼을 추가하는 방법은 무엇입니까?

html 및 javaScript를 사용하여 회전식 다이어그램에 탐색 버튼을 추가 할 수 있습니다. HTML에서 이전 및 다음 내비게이션에 두 개의 버튼을 추가하십시오. JavaScript 에서이 버튼에 이벤트 리스너를 추가하십시오. 클릭하면 회전식 회전을 업데이트하여 이전 또는 다음 슬라이드를 표시해야합니다.

단색 대신 이미지를 슬라이드로 사용할 수 있습니까?

물론 이미지를 슬라이드 쇼로 사용할 수 있습니다. CSS에서 배경색을 설정하는 대신 각 슬라이드의 배경 이미지를 설정할 수 있습니다. 최상의 시각적 효과를 위해 이미지에 올바른 크기와 해상도가 있는지 확인하십시오.

회전식 다이어그램에 자동 재생 기능을 추가하는 방법은 무엇입니까?

AutoPLay는 JavaScript를 사용하여 추가 할 수 있습니다. 함수를 사용하여 일정 기간 후 회전식 다이어그램의 회전을 자동으로 업데이트 할 수 있습니다. 사용자가 회전 목마와 상호 작용하여 예기치 않은 동작을 방지 할 때 간격을 지우십시오.

회전 목마에 전환 효과를 추가 할 수 있습니까?

예, CSS를 사용하여 회전 목마에 전환 효과를 추가 할 수 있습니다.

속성을 ​​사용하면 지정된 기간 동안 CSS 속성의 애니메이션 변경을 할 수 있습니다.

속성에 적용하여 회전식 맵의 회전을 애니메이션 할 수 있습니다.

회전식지도를 무한히로 만드는 방법은 무엇입니까?

회전 목마 그래프 무한 루프를 만드는 데는 일부 JavaScript가 포함됩니다. 회전 목마가 마지막 슬라이드에 도달하면 회전을 첫 번째 슬라이드로 재설정 할 수 있습니다. 이것은 사람들에게 무한 루프의 환상을 제공합니다.

슬라이드에 텍스트를 추가 할 수 있습니까?

예, 슬라이드에 텍스트를 추가 할 수 있습니다. HTML에서는 각 목록 항목에 텍스트 요소를 추가 할 수 있습니다. CSS에서 슬라이드의 위치에 따라 텍스트 요소를 찾아 필요에 따라 스타일링하십시오.

회전식 차트에 페이드 효과를 추가하는 방법은 무엇입니까?

CSS를 사용하여 페이드 효과를 추가 할 수 있습니다. 속성을 ​​setInterval 속성과 함께 사용하여 페이드 효과를 애니메이션 할 수 있습니다. 회전 목마에있는 슬라이드 쇼를 조정하여 원하는 효과를 만듭니다.

다른 모양을 회전식으로 사용할 수 있습니까?

예, 다른 모양을 회전식으로 사용할 수 있습니다. 회전식 그래프의 모양은 CSS의

속성에 의해 결정됩니다.

속성의 값을 조정하면 큐브, 실린더 또는 기타 3D 모양의 회전 목마를 만들 수 있습니다. transform

위 내용은 CSS 및 JavaScript로 3D 회전 회전 목마 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!