구글에서 tilt를 검색하면 검색 화면이 기울어져서 나온다.(한번 검색해보세요.)
와..신기하다. 구글은 역시 기발해.
생각하고 창을 닫아버린다면 당신은 개발자가 아닌것이다.(너무 심한 억측인가요?ㅎ)
개발자라면 자고로! 이것은 어떻게 만든것이지?! 라고 생각하면 소스를 뜯어봐야겠지요?!
요소검사를 해보자 5초만에 보이더군요.
<body> 자체에 css로 표현을 했습니다.
문제는 html5 에서만 지원하는 transform:rotate() 를 사용했습니다.
transfrom 함수의 경우 표준 함수가 아닌 관계로 브라우저 마다 명시를 해줘야 합니다.(html5를 공부하셧다면 당연히 아시겠지요?)
rotate()안의 변수는 기울기로 1deg(1도) 만큼 기울어 진것입니다.
왼쪽이 일반. 오른쪽이 rotate를 적용한 화면이다.
html5 브라우저별 지원하는 함수는 여기서 찾아보시길 : http://caniuse.com/
참고로 totate() 의 지원 여부는 다음과 같다.
'web > HTML' 카테고리의 다른 글
| PC에서 모바일 페이지 보기(크롬 플러그인 User-Agent Switcher for Chrome) (0) | 2013.03.14 |
|---|---|
| html 특수 문자 ( Special Characters in HTML ) (0) | 2012.12.06 |
| JSON을 응용해보자.(JSON + jquery 예제 2) (0) | 2012.06.15 |
| JSON은 무엇일까? (JSON + jquery 예제) (5) | 2012.06.14 |
| HTML5 webDB 예제 (2) | 2012.06.11 |
