2013-05-26 3 views
0

Meny와 같은 CSS/JS 애니메이션을 최근에 발견했습니다. http://github.com/hakimel/meny 사실은 한쪽이 화면을 벗어나게 만듭니다. 내 목표는 전체 cube'd 웹 사이트를 만드는 것입니다.웹 사이트를 실제 큐브로 만들기

아이디어 : 웹 기술을 사용하여 기본 응용 프로그램을 만드는 기술을 사용하고 있습니다. 상황이 정말 멋지게 보이도록 3D 애니메이션을 구현하고 싶습니다. 사실, 나는 주된 견해를 과도하게 채우고 싶지 않다. 그래서 나는 실제로 5 ~ 6 가지를 가질 수 있다고 생각했다. 위쪽, 아래쪽, 왼쪽, 오른쪽의 네 가지 Meny 옵션이 모두 활성화되어 있다고 가정 해보십시오. 따라서 사용자가 자신의 코스 커를 상단 또는 다른 측면으로 이동하면 개별 얼굴 중 하나가 표시됩니다. 아래쪽에는 작은 콘솔 창이 있습니다. 왼쪽에 검색이 있습니다. 오른쪽에는 몇 가지 정보와 트리거가 표시되고 실제 메뉴 상단에는 정보가 표시됩니다. 항상 보이지 않는 얼굴 인이 센터는 동적으로로드 된 컨텐츠를 보유합니다. 이렇게하면 측면 얼굴을 사용하여 AJAX가 주 얼굴을 호출 할 수 있습니다.

어떻게 애니메이션 큐브와 같은 디자인을 구현할 수 있습니까? 앞면 뒤쪽의 여섯 번째면은 실제 입력과 같은 터미널의 종류와 함께 콘솔의보다 자세한 버전 일 수 있습니다.

내가 사용하는 데스크톱 기술은 appJS입니다. 그것은 아직 3D를 지원하지 않으므로 다른 기술자들도 마찬가지입니다. Safari에서 인터페이스 자체를 잘못 디버그하십시오.

+0

페이지의 다른 버전을 보여주는 각각의 얼굴 브라우저에서 큐브이 봐 있나요? three.js - http://threejs.org/에서 살펴보십시오. 그것은 webgl 라이브러리입니다. 다음은 장면 내부의 비행기에 html을 구현 한 예제입니다 (http://stemkoski.github.io/Three.js/CSS3D.html). – Nile

+0

매우 흥미롭지 만 복잡한 o.o도 보인다. 그러나 아프다. 다른 도움이되지 않는다면, 이걸 어떻게 든 사용하십시오 ... 어떻게 든. –

답변

2

CSS 3D 변환과 관련해서는 너무 어렵지 않습니다.

http://desandro.github.io/3dtransforms/docs/cube.html

그리고 데모 :

http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html

+0

재미있는 슈퍼! 이것을 몸에 적용하고 마우스 포인터가 특정 영역을 찌르면 큐브를 자동 회전시키는 Meny의 방법을 사용하려고합니다. 감사! –

+0

좋아, 나는 예제를 거쳐 최종 데모를 사용하여 복사본을 만들었다. 이제 내 큐브가 실제로 회전하지만 ... 문자 그대로 올라갑니다. [코드] (https://gist.github.com/IngwiePhoenix/30afe0160fe0eb61d1bf) –

관련 문제