3D의 CSS : 상자 대신 큐브로 생각하는 법 배우기

CSS로의 여행은 전형적인 프론트 엔드 개발자 이야기가 아닙니다. 나는 Java 프로그래머로 시작했으며, 초기 CSS 경험은 Visual Studio 내에서 색상 선택으로 제한되었습니다.

프론트 엔드 개발에 대한 나의 열정과 그 후 CSS는 나중에 CSS3의 부상과 일치하면서 발화되었습니다. 3D와 애니메이션의 매력으로 인해 레이아웃이나 색상 이론보다 CSS에 대한 이해를 더욱 심오하게 만들었습니다.

3D CSS 효과를 제작하는 데 상당한 시간을 보낸 후 워크 플로를 개선했습니다. 이 기사는 현재 접근 방식을 공유하며 3D CSS 기술을 향상시키기위한 팁과 요령을 제공합니다.

입방체 : 기본 빌딩 블록

대부분의 3D 창작물의 경우, cuboid는 기본 요소 역할을합니다. 더 복잡한 모양을 달성 할 수 있지만 세부 사항에 더 큰 관심을 기울여야합니다. 특히 곡선은 현재 도전 과제를 해결하기위한 기술이 존재하지만 (나중에 논의).

기본 입방 형을 만드는 것은 여기에서 다루지 않습니다. 안내는 Ana Tudor의 우수한 게시물 또는이 스크린 캐스트를 참조하십시오. 본질적으로, 부모 요소는 얼굴을 나타내는 6 개의 아동 요소를 포함하는 입방 형을 캡슐화합니다. 결정적으로 transform-style: preserve-3d; 이상적으로 전 세계적으로 적용해야합니다.

 * {변환 스타일 : Preserve-3D; }

복잡한 3D 모델의 경우 전체 장면을 입방체 어셈블리로 시각화하십시오. 3D 책을 고려하십시오 : 4 개의 cuboids (각 표지마다 1 개, 척추 용 및 페이지 용 1 페이지)가 마무리 터치를 추가하는 배경 이미지를 고려하십시오.

장면 구조 : 기초 설립

입방체를 레고 벽돌로 생각하십시오. 프로세스를 단순화하려면 3D 모델이있는 기본 표면 인 "평면"요소를 작성하는 것이 포함됩니다. 이것은 회전과 움직임을 단순화합니다.

내가 선호하는 접근법은 x와 y 축을 따라 평면을 회전시킨 다음 rotateX(90deg) 로 평평하게 시작합니다. 그 후, 새로운 큐보이드를 추가하는 것은 position: absolute .

 .비행기 {
  변환 : rotatex (calc (var (-Pronate-X, -24) * 1deg)) rotatey (calc (var (-rotate-y, -24) * 1deg)) rotatex (90deg) translate3d (0, 0, 0);
}

보일러 플레이트 및 퍼그로 개발 간소화

수많은 cuboids를 생성하는 반복적 인 특성은 간소화 된 접근법이 필요합니다. 나는 템플릿 엔진 인 퍼그를 활용하여 믹스 인을 통해 입방 구조를 생성합니다. (필요한 경우 빠른 퍼그 소개를 사용할 수 있습니다.)

퍼그를 사용하는 일반적인 장면 구조는 다음과 같습니다.

 Mixin cuboid (classname)
  .Cuboid (class = className)
    // cuboid의 각면에 대한 6 개의 div 요소 ...

내 입방체 클래스의 해당 CSS는 다음과 같습니다.

 .cuboid {
  // ... (css cuboid styling을위한 CSS) ...
}

... (css cuboid의 각면에 대한 CSS 규칙) ...

CSS 변수의 힘을 활용합니다

CSS 변수 (사용자 정의 속성)의 광범위한 사용은 효율성을 크게 향상시킵니다. 내 입방체는 변수에 의해 구동됩니다.

• --width : 비행기의 입방체 너비
• --height : 비행기의 입방체 높이
• --depth : 입방체 깊이
• --x : x 비행기에서 위치
• --y : y 비행기에서 위치

vmin 은 주로 반응 형 크기에 사용됩니다. 비행기는 평평하게 놓여있어 직관적 인 높이, 너비 및 깊이 참조가 가능합니다.

Dat.Gui로 디버깅 : 실시간 제어 및 검사

Handy Dat.Gui 라이브러리는 실시간 디버깅을 용이하게합니다. 런타임 중 CSS 변수를 수정하여 회전, 위치 및 치수에 대한 쉽게 조정할 수 있습니다. dat.gui를 사용하여 평면 회전은 공간 관계를 시각화하는 데 도움이됩니다.

센터링 및 위치 : 정밀 및 조직

각 입구는 의도적으로 중앙에 있으며 평면보다 절반과 절반이 있습니다. 이것은 애니메이션, 특히 z 축 회전을 단순화합니다. 복잡한 장면의 경우 하위 플랜은 조직을 향상시켜 섹션을 독립적으로 조작 할 수 있습니다.

미학 : 정제 및 시각적 매력

구조적 완성 후 초점은 미학으로 이동합니다. 색상과 음영에 대한 CSS 변수를 일관되게 사용하면 시각적 조화가 향상됩니다. 배경 이미지와 의사 요소는 세부 사항과 질감을 추가합니다. brightness() 와 같은 필터는 얼굴 전체에 미묘하게 음영을 조정할 수 있습니다.

깊이의 환상 : 연기 및 미러 기술

때때로, "Faux"3D 효과는 요소가 적은 설득력있는 깊이를 만듭니다. 전략적으로 위치 및 회전 된 평평한 요소는 3D 모양을 모방 할 수 있습니다.

불규칙한 모양 해결 : 창의적 문제 해결

불규칙한 모양에는 사례 별 솔루션이 필요합니다. 다각형은 곡선을 근사화 할 수있는 반면, 원근법 트릭은 깊이의 환상을 만들 수 있습니다.

Z-Fighting : 겹치는 요소 충돌 해결

겹치는 요소가 깜박 거리는 Z-Fighting은 충돌을 방지하기 위해 신중한 DOM 순서와 약간의 위치 오프셋으로 해결됩니다.

결론 : 3D CSS 여행을 시작하십시오

3D CSS의 도전을 받아들이고, 다른 기술을 실험하고, 창조물을 공유하십시오. 인내심과 창의성은이 보람있는 노력의 핵심 요소라는 것을 기억하십시오.

위 내용은 3D의 CSS : 상자 대신 큐브로 생각하는 법 배우기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!