어떻게 대각선 격자 레이아웃을 수행합니까?

-1

프로젝트 갤러리의 대각선 격자 레이아웃을 개발하고 싶습니다. 내가 필요로하는 것을 가진 프로젝트를 발견했습니다 - http://neolab.no/.어떻게 대각선 격자 레이아웃을 수행합니까?

다음은 내가해야 할 레이아웃입니다. http://felipefernandes.nu/beta/fsmohan/screenshot/Wireframe_Site_FSMohan-05.jpg

아이디어가 있으십니까?

출처

2013-04-09 RipCorP

두 가지 방법, 많은 이미지 또는 css3 rotate를 볼 수 있습니다. 첫 번째는 더 호환됩니다. – dezman

오늘 CSS 그리드와 변환을 사용하여이를 수행 할 수 있습니다. – 0xcaff

당신은 몇 가지 옵션을 가지고 있지만 아무도 정말 좋은 없습니다 :

이미지를 잘라이 잘 보일 것이다, 그러나이 사각형을 기반으로합니다 이후 마우스 오버는 어려울 것이다.
이미지 맵 사용 : 마우스를 올리면 영역이 올바르게 정렬되지만 효과는 어려워집니다.
CSS3 변형 : IE9 + 만 처리 할 수있는 경우이 옵션이 될 수 있습니다. 이미지를 시계 방향으로 회전 한 다음 CSS를 통해 시계 반대 방향으로 회전해야합니다 (또는 그 반대). 여기에 a quick example이 있습니다.
사용 <canvas>
플래시 사용 : 솔직히 기능 및 디자인에 대한 최선의 방법 일 수 있지만 웹 사이트를 플러그인에 의존하도록 강요하는 것은 많은 문제가 있습니다.

출처

2013-04-09 17:59:18 Travis

고마워요 트래비스! 나는 CSS3 Tranform과 각 블록의 절대 위치를 사용했다. 이 솔루션의 단점은 응답 프로젝트를 필요로한다면 다시 한 번씩 다시 배치해야한다는 것입니다. 하지만 괜찮아. 링크는 여기에 있습니다. [link] (http://felipefernandes.nu/beta/fsmohan/) – RipCorP

@RipCorP, Wow, 정말 잘 나왔습니다! 잘 했어! – Travis

어떻게 대각선 격자 레이아웃을 수행합니까?

답변

관련 문제