3d에서 CSS를 징수하는 방법

Braydon Coyer는 월간 CSS Art Challenge를 시작하여 CSS와 함께 내 책 Move Things를 상금으로 기부하도록 초대했습니다. 첫 달의 주제는 "Spring"이며, 즉시 봄 장난감 -Slinky를 상기시킵니다.

이 기사는 CSS를 사용하여 Slinky의 아래층 운동을 시뮬레이션하는 3D 효과를 만드는 방법을 살펴 봅니다.

Slinky의 HTML 구조

Slinky의 행동을 유연하게 제어하기 위해 CSS를 사용하여 속성을 사용자 정의합니다. 퍼그로 작성된 HTML 구조는 다음과 같습니다.

 - const ring_count = 10;
.컨테이너
  .장면
    .PLAGE (style =`-ring-count : $ {ring_count}`)
      - 링 = 0;
      반지 중 <ring_count .ring :><p> 이 코드에 의해 생성 된 HTML에는 10 개의 링 요소가 포함되어 있으며 각각은 <code>--index</code> 속성이있는 인덱스를 나타냅니다. </p>
<p></p>
<div><div><div style="--ring-count: 10">
<div style="--index: 0;"></div>
<div style="--index: 1;"></div>
<div style="--index: 2;"></div>
<div style="--index: 3;"></div>
<div style="--index: 4;"></div>
<div style="--index: 5;"></div>
<div style="--index: 6;"></div>
<div style="--index: 7;"></div>
<div style="--index: 8;"></div>
<div style="--index: 9;"></div>
</div></div></div>
<h3> Slinky의 초기 CSS 스타일</h3>
<p> 3D 장면이 필요합니다. 다음 CSS 코드는 Slinky의 속성과 시나리오를 정의합니다.</p>
<pre class="brush:php;toolbar:false"> : 루트 {
  -보더 볼트 : 1.2Vmin;
  -심 : 20Vmin;
  -스택-높이 : 6VMIN;
  -스카네 크기 : 20Vmin;
  -링 크기 : calc (var (-장면 크기) * 0.6);
  -평면 : 방사형 그레이드 (RGB (0 0 / 0.1) 50%, 투명한 65%);
  -링-쉐이도 : RGB (0 0 / 0.5);
  -Hue-One : 320;
  -HUE-TWO : 210;
  -Blur : 10px;
  -속도 : 1.2S;
  ---BG : #fafafa;
  -링 필터 : 밝기 (1) Drop-Shadow (0 0 0 var (-악센트));
}

* {
  박스 사이징 : 국경 박스;
  변환 스타일 : Preserve-3D;
}

.Container {
  높이 : var (-장면 크기);
  너비 : var (-장면 크기);
  변환:
    Translate3d (0, 0, 100vmin)
    rotatex (-24deg) rotatey (32deg)
    rotatex (90deg)
    translatez (calc ((-var (-깊이) var (-스택-하이 라이트)) * -1))))
    회전 (0DEG);
}

.장면,
.비행기 {
  높이 : 100%;
  너비 : 100%;
  위치 : 상대;
}

.비행기 {
  변환 : Translatez (var (-깊이));
}

.container 의 변환은 여러 단계로 구성되며 궁극적으로 장면을 회전하고 찾습니다.

슬링키 링 스타일

다음 CSS 코드는 사용자 정의 속성을 사용하여 --index 및 --ring-count 사용하여 각 링을 찾습니다.

 .반지 {
  -origin-z : calc (var (-Stack-Height)-(var (-stack-height) / var (-ring-count)) * var (-index));
  -hue : var (-Hue-one);
  -accent : HSL (var (-Hue) 100% 55%);
  높이 : var (-링 사이즈);
  너비 : var (-링 사이즈);
  국경-라디우스 : 50%;
  국경 : var (-국경비) solid var (-악센트);
  위치 : 절대;
  상단 : 50%;
  왼쪽 : 50%;
  변환-오리진 : calc (100% (var (-장면 크기) * 0.2)) 50%;
  변환 : translate3d (-50%, -50%, var (-Origin-Z)) translatez (0) rotatey (0deg);
}

.ring : nth-of-type (홀수) {
  -hue : var (-Hue-Two);
}

--origin-z z 축에서 각 링의 초기 위치를 계산하고 transform 특성은 링을 찾아 회전시킵니다.

슬링키 링 혁신 및 애니메이션

Slinky의 플립 및 낙상 효과를 달성하기 위해서는 각 링의 대상 --destination-z 축 위치를 계산하고 변환을 제어하기 위해 애니메이션을 사용해야합니다 URABLE 3D CSS SLINKY 효과. CSS 애니메이션의 한계와 Greensock과 같은 JavaScript 애니메이션 라이브러리의 장점에 대해서도 논의합니다.

요약

이 기사는 순수한 CSS를 사용하여 HTML 구조, CSS 스타일, 애니메이션 구현 및 사전 처리기 스타일러스 사용을 다루는 3D 구성 가능한 Slinky 효과를 생성하는 복잡한 프로세스에 대해 자세히 설명합니다. CSS 애니메이션의 한계 및 개선 제안은 기사에서 논의됩니다. 최종 효과는 구성 가능하고 사용자 정의 가능한 3D Slinky 애니메이션입니다.

위 내용은 3d에서 CSS를 징수하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!