CSS 3 rotate 45deg 테스트

CSS3 를 지원하는 브라우저에서만이라도 애니메이션을 보여주자는 취지에서 로고에 CSS3 를 사용해보았습니다.

사용한 CSS

.logo {

height: 72px;

text-indent: -5000px;

background: url(./images/logo_small.png) no-repeat;

}

#n {

width: 48px;

height: 48px;

background: url(./images/letter_n.png) no-repeat;

position:absolute;

top:72px;

left:400px;

}

#o {

width: 36px;

height: 62px;

background: url(./images/letter_o.png) no-repeat;

position:absolute;

top:44px;

left:426px;

-webkit-animation:moving_letter_o 3s infinite;

-webkit-transform-origin: 12px 36px;

}

@-webkit-keyframes "moving_letter_o" {

0% {

-webkit-transform: rotate(0deg);

}

50% {

-webkit-transform: rotate(60deg);

}

100% {

-webkit-transform: rotate(0deg);

}

}

사용한 HTML

<div class=logo>On weekend</div>

<div id=o></div>

<div id=n></div>

사용한 이미지

타이틀 작성 방법은 "Phark method" 을 사용했습니다. (아주 큰 음수값을 인덴트하여 텍스트를 숨기고 이미지를 보여주죠. 웹 접근성을 고려한 방법중 가장 마음에 듭니다)

데모

On weekend

 

참고 페이지

http://css3maker.com