CSS 및 JavaScript로 완전히 구축된 10가지 놀라운 3D 프로젝트

웹은 전화 접속 인터넷 및 GeoCities 페이지에서 먼 길을 왔습니다. 웹사이트는 이제 완전히 반응하며 터치스크린 장치에서 액세스할 수 있습니다. 그러나 최신 브라우저는 "주류" 웹 디자인을 훨씬 뛰어넘었습니다.

프론트엔드 기술만을 사용하여 브라우저에서 놀라운 3D 효과를 만드는 것이 가능합니다. 그리고 이 게시물에서 저는 웹이 몇 십 년 동안 얼마나 발전했는지 보여주는 제가 가장 좋아하는 3D 웹 프로젝트를 선보일 것입니다.

원근감 상자

믿거 나 말거나 이 상자 애니메이션은 순수한 CSS3 변환으로 만들어졌습니다. 실제 큐브는 CSS를 사용하여 렌더링하기가 매우 쉽고 교대 색상은 다른 클래스에서 작동합니다.

애니메이션은 반복되는 키프레임 애니메이션을 사용하여 이러한 상자가 3D 공간에서 튀는 환상을 제공합니다. 오른쪽 상단 모서리에 있는 원근감 버튼을 클릭하면 이 3D 모델을 다양한 각도에서 볼 수도 있습니다. 정말 멋진!

순수 CSS3 그래프

순수한 CSS3 애니메이션의 또 다른 예는 Ana Tudor가 만든 이 막대 그래프입니다. 각 사각형의 4면을 나타내는 4개의 내부 div가 있는 간단한 HTML 컨테이너를 사용합니다.

막대는 CSS3를 사용하여 애니메이션할 수 있을 만큼 쉽고 모두 다양한 높이로 자랍니다. 그러나 가장 인상적인 부분은 이 전체 애니메이션이 막대 그래프가 성장하는 동안에도 시야각을 회전 하는 방식입니다.

이것은 계산 기능으로 애니메이션을 자동화하기 위해 많은 Sass 코드를 사용하므로 약간 기술적입니다. 그러나 3D에 대해 더 많이 배우려고 하는 경우 이 펜이 뛰어들 수 있는 견고한 펜입니다.

터널 비전

Trippy Webkit 브라우저 경험을 위해 일부 CSS3 변환 및 Sass 속성으로 생성된 이 3D 터널을 살펴보십시오.

교체 색상은 특정 기간 후에 HSL 색상 값을 교체하는 Sass for 루프를 통해 실행됩니다. 이 루프는 다채로운 색종이 조각의 터널을 무한정 여행하고 있다는 환상을 줍니다. 꽤 야생!

특별해 보이지 않을 수도 있고 주요 웹사이트에서는 확실히 실용적이지 않습니다. 그러나 이것은 창의력과 코딩 지식으로 얼마나 많은 일을 할 수 있는지에 대한 증거입니다.

CSS의 3D iPhone

iPhone 4는 근본적으로 새로운 디자인을 제공했으며 모두가 멋진 새 스마트폰에 대해 열광했습니다. 개발자 Jonathan Levaillant는 순수 CSS로 디자인을 재창조한 이후로 iPhone 4를 정말 즐겼을 것입니다.

회전하는 장치가 이동함에 따라 이것은 매우 멋집니다. 그것은 iPhone처럼 보이며 외부 밴드는 사실적인 그라데이션으로 빛을 반사합니다. iPhone의 화면은 Apple 서버에서 호스팅되는 mp4 비디오를 재생하며 원근감에서도 제대로 왜곡됩니다.

이것에 대해 가장 미친 것은 모든 것을 CSS에만 의존하는 방식입니다. 순수 CSS3 iPhone이 브라우저에서 완전히 상호작용할 수 있게 되면 앞으로 10년이 더 걸릴 것입니다.

3D 태양계

은하수는 우주의 작은 구석이며 Julian Garnier가 만든 이 놀라운 펜으로 완벽하게 표현되어 있습니다.

많은 CSS를 사용하지만 대부분의 사용자 정의 가능한 효과는 JavaScript에 의존합니다. 이를 통해 다양한 행성의 속도, 크기 및 거리를 변경할 수 있습니다.

3D 보기와 오버헤드 2D 보기 사이를 비교적 쉽게 전환할 수도 있습니다. 프론트엔드 개발의 뛰어난 사용에 대해 이야기하십시오!

음영 큐브

이 단순한 음영 큐브는별로 없어 보일 수 있습니다. CSS로 제작되었으며 CSS3 애니메이션을 사용하여 한 축에서 자동으로 회전합니다.

그러나 마우스를 가져갈 때 큐브에 애니메이션을 적용할 수 있는 대화형 설정이 있습니다. 이것은 확실히 멋진 트릭이며 tilde(~) selector 와 함께 :hover 및 :checked 의사 클래스를 포함한 몇 가지 드문 CSS 기술에 의존합니다.

CSS 3D 캐러셀

이미지 캐러셀은 그래픽, 사진 및 비디오를 회전식으로 표시하는 데 적합합니다. 그리고 이 CSS3 캐러셀을 사용하면 이 재미있는 슬라이더를 완전히 새로운 수준으로 끌어올릴 수 있습니다.

이 매우 기본적인 3D 캐러셀은 클릭 이벤트를 사용하여 서로 다른 요소 간에 애니메이션을 적용합니다. 3D 스타일은 놀라울 정도로 상세하며 순전히 CSS 코드에 의존합니다.

여기에 필요한 유일한 JavaScript는 다음/이전 버튼 사이를 전환하고 3D 스타일을 제자리에 애니메이션으로 적용하는 것입니다. 그리고 이것은 실제로 실제 사이트에서 사용할 수 있는 것이므로 현대 웹 디자인에서 실용적으로 사용할 수 있습니다.

사자를 진정시키다

여기에 약간 덜 실용적이지만 여전히 사용하기에 매우 재미있는 것이 있습니다. Karim Maaloul이 렌더링한 이 3D 사자는 Three.js를 사용하여 땀에 젖은 사자에게 시원한 공기를 불어넣을 수 있는 재미있는 게임을 만듭니다.

커서로 페이지 주위로 팬을 움직이면 사자의 시선이 따라옵니다. 그런 다음 클릭하여 전동 팬을 시작하고 사자에게 시원한 바람을 보낼 때 사자가 흥분하는 모습을 지켜보십시오.

개발자는 수염의 움직임과 함께 사자 갈기에 날개가 퍼덕거리는 영역을 만들기까지 했습니다.

이것은 3D 효과가 얼마나 멀리 왔는지에 대한 또 다른 상세한 예입니다.

3D NES 컨트롤러

클래식 게임은 현재 세대의 코더에 흔적을 남겼으며 순수 CSS3에서 렌더링된 Johan van Tongeren의 3D NES 컨트롤러에서 이를 확인할 수 있습니다.

Firefox에서도 잘 렌더링되지만 Chrome/WebKit 브라우저에서 가장 잘 작동합니다. CSS가 얼마나 멀리 왔는지 확인하는 것은 실제로 더 많은 실험이므로 완벽할 것이라고 기대하지 마십시오!

케플러 궤도

케플러 궤도의 이 현실적인 모델을 만드는 데 얼마나 걸렸는지 상상할 수 없습니다. 이 모델은 우주에서 다른 물체에 대한 신체의 움직임을 보여주며, 이 경우 개발자인 Danie Clawson은 놀라운 일을 했습니다.

이 전체 모델은 시각적 효과를 위해 CSS를 사용하고 3D 효과를 위해 Three.js를 사용합니다. 왼쪽 상단 모서리에는 많은 궤도 변수를 변경하여 개체의 속도, 크기 및 배치에 영향을 줄 수 있는 옵션 상자가 있습니다.

궤도를 도는 물체가 어느 면이 태양을 향하고 있는지에 따라 음영이 있는 사실적인 조명 을 사용한다는 것을 알 수 있습니다. 이것은 매우 인상적이며 세부 사항에 대한 엄청난 관심으로 이 목록에서 1위에 속합니다.

이 예제가 프론트엔드 개발에 대해 더 많이 배우고 자신만의 3D 프로젝트를 만들 수 있도록 영감을 줄 수 있기를 바랍니다.