소개

작업 중인 프로젝트에 대해 간단한 3D CSS 기술을 배워야 합니다.그래서 저는 CSS에서 Xbox 시리즈 X와 S 모델을 구축하여 이를 어떻게 실현하는지 배우기로 했습니다.

이 프레젠테이션에서는 두 가지 Xbox 시리즈 모델 중에서 선택할 수 있습니다.선택하지 않은 모델을 선택하면 변환이 발생합니다.커서를 모델의 한 면으로 이동하면 뷰가 약간 변경됩니다.
여기에서 프레젠테이션을 찾을 수 있습니다.
https://codepen.io/tumain/full/poyqVeb
나는 이것이 내가 어떻게 프레젠테이션을 만드는지, 그리고 그것의 시각적 측면을 포함하는 흥미로운 것이 될 것이라고 생각한다.다음을 포함합니다.

입방체 생성

모델 간 변환

모형의 도안

Xbox 로고 생성

커서 위치에서 3D 이동

다차원 데이터 세트 생성

우선, 나는 입방체를 어떻게 만드는지 연구했다.나는 this guide로 하나를 세웠다.만약 당신이 CSS 입방체의 창설에 익숙하지 않다면, 나는 당신이 이 글을 읽는 것을 건의하지만, 간단하게 말하자면,나는 .cube 클래스를 만들었다.이 .cube류는 6개의 원소를 포함하고 각 원소는 입방체의 한 면을 대표한다. 정상, 오른쪽, 밑부분, 왼쪽, 뒷부분과 앞부분이다.3D 변환을 통해 각 입방체의 변환과 회전을 변경하여 입방체를 만들 수 있습니다.
그리고 나는 각 Xbox의 사이즈를 기록하고 다음 그림에서 각 Xbox의 색깔을 채집했다.

각 모델은 변환할 때 변경되는 동일한 CSS 변수를 공유합니다.그래서 이 데이터를 저장하기 위해 CSS 변수를 만들었습니다.

:root {
    --height: 55vw;
    --width: 30.2vw;
    --depth: 12.6vw;
    --seriess: #E7E7E7;  // Series S background colour
    --seriesx: #1F1E25;  // Series X background colour
    --view: -222deg;     // View of the scene
}

이 CSS 변수를 사용하도록 안내서에 사용된 기존 CSS 너비와 높이를 업데이트했습니다.그리고 나서 나는 뷰가 만족스러울 때까지 모델의 3D 변환을 조정했다.

두 모델 간의 변환

각 모델의 색상과 사이즈를 불러왔습니다. Xbox 모델의 각 면에 색을 놓는 두 가지 종류를 만들었습니다.하나는 .series-s, 다른 하나는 .series-x 에 사용됩니다.이 종류는 body 표시에 적용되며, 구체적으로 선택한 모델에 달려 있다.
다음 문제는 선택한 모델에 따라 CSS 변수를 업데이트하는 것입니다.나는 JSstyle.setProperty 방법으로 이것을 집행했다.예를 들어, 화면에서 모델의 너비--width를 변경하려면 다음과 같이 합니다.

document.documentElement.style.setProperty("--width", NEW_WIDTH_HERE + "vw");

내 JS에 나는 모든 모델 차원을 포함하는 대상을 저장했다.이것은 s 시리즈의 한 예다.

let seriesS = {
  height: 55,
  width: 30.2,
  depth: 12.6
};

이 속성을 전달할 수 있는 함수를 만들었습니다. 이 함수는 모델의 차원을 업데이트합니다.

let setProperties = (props) => {
  document.documentElement.style.setProperty("--width", props.width + "vw");
  document.documentElement.style.setProperty("--height", props.height + "vw");
  document.documentElement.style.setProperty("--depth", props.depth + "vw");
};

이것을 터치하기 위해서 나는 페이지 밑에 클릭할 수 있는 X와 S 요소를 만들었다.만약 내가 S모델을 원한다면, 나는 setProperties 대상 호출seriesS 방법을 사용하고 body 표시에서 현재 클래스를 삭제하고 내가 원하는 클래스를 추가하기만 하면 된다.series-s .

let seriesSSelected = () => {
  setProperties(seriesS);
  document.body.classList.add("series-s");
  document.body.classList.remove("series-x");
};

색상과 치수 사이의 변환을 완료한 후 각 모델의 시각적 요소를 추가했습니다.
S 모델에는 카테고리.circle를 사용하는 대형 검은색 원형 통풍구가 있습니다.이것은 단지 모델 정면에 절대적으로 있는 검은색 동그라미 border-radius: 50% 일 뿐이다.
X 모델을 선택할 때 수축되는 전환을 실현하기 위해 x-scale-0 클래스를 만들었습니다.이 클래스는 .series-x의 하위 클래스로 요소의 비율을 0으로 설정할 뿐입니다.따라서 X 시리즈를 선택하면 축소됩니다.

.series-x .x-scale-0 {
   transform: scale(0);
}

마찬가지로 또 다른 방식으로 일하는 .s-scale-0 종류가 있다.

모델상의 모드

S 및 X 모델의 상단에는 원형 통풍구가 있습니다.S형 차의 앞부분에도 원형 통풍구가 있다.이 모델을 실현하기 위해 나는 배경을 사용했다.사용radial-gradient 및background-size.
다음은 S의 앞 원입니다.

background-size: .9vw .9vw;
background-image: radial-gradient(#000 50%, transparent 50%);

장면에 따라 나는 동그라미의 크기를 증가/감소시키기 위해 배경 크기를 조정했다.

Xbox 로고 만들기

Xbox 로고는 세 개의 동그라미로 구성됩니다.

배경용 완벽한 원형

1에 끼워넣기;테두리, 너비 및 높이가 다른 투명한 형태

2와 같지만 다른 위치에 배치

2시와 3시에 대해 나는 폭과 높이를 대량으로 조정하여 필요한 결과를 얻었다.

커서 위치의 3D 이동

나는 마지막 순간에 이것을 추가했다. 단지 그것이 3D라는 것을 자랑하기 위해서였다.이것은 CSS 변수--view를 사용합니다. 우리가 시작할 때 언급한 바와 같습니다.
나는 우선 본문에 사건 탐지기, 추적mousemove과 mouseleave을 추가했다.mousemove 커서 위치에 따라 CSS--view 변수를 약간 변경합니다.mouseleave 는 --view 를 초기 변수로 재설정합니다.

// the scene's initial rotation value
let initialView = -222;

// move rotation on mouse movement
let onMouseMove = (e) => {
// calculate percentage of the cursor's x position
// e.pageX: cursor position
// window.innerWidth: screen width
  xPercent = parseInt((e.pageX / window.innerWidth) * 100) - 75;
// add the movement to the initial view
  var view = initialView;
  view += xPercent / 2;
// update the --view CSS variable
  document.documentElement.style.setProperty("--view", view + "deg");
};

위에서 설명한 코드가 의미가 있기를 바랍니다."75"값을 사용하는 이유는 카메라를 왼쪽이나 오른쪽으로 옮기는 것이 정상적인 오프셋처럼 느껴지기 때문이다.
마우스 분리 이벤트는 모델을 초기 뷰로 재설정할 뿐이므로 커서가 화면을 벗어나면 뷰가 재설정됩니다.

let onMouseLeave = (e) => {
  document.documentElement.style.setProperty("--view", initialView + "deg");
};

그리고 사건 탐지기를 추가해야 합니다.

let b = document.body;
b.addEventListener("mousemove", onMouseMove);
b.addEventListener("mouseleave", onMouseLeave);

결론

여기 있습니다.나는 장면이 어떻게 발전하는지 깊이 이해할 수 있기를 바란다. 이것은 재미있는 책이다.가장 복잡한 장면은 아니지만 제가 어떻게 시각적 효과를 만드는지 깊이 있게 이해하는 것이 유용하다고 생각합니다. 왜냐하면 이것은 처음으로 3D CSS를 사용하기 때문입니다.
읽어주셔서 감사합니다.