HTML5 CSS Transform (Google)

Today I am going to introduce transform effect of CSS3.
just mouse over below box then it will rotate smoothly.

오늘 보실 효과는 css3의 transform 효과 입니다.
-webkit-transform 을 이용해서 구현하시면 됩니다.

이 기능은 인터넷 익스플로어와 오페라에서는 작동하지 않네요.

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Not working (X)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O)

CSS

Transforms

Hover over me:

-webkit-transform: rotateY(45deg); -webkit-transform: scaleX(25deg); -webkit-transform: translate3d(0, 0, 90deg); -webkit-transform: perspective(500px)

#threed-example { -webkit-transform: rotateZ(5deg); -webkit-transition: -webkit-transform 2s ease-in-out; } #threed-example:hover { -webkit-transform: rotateZ(-5deg); }

You can download the Sample source code below.
아래 샘플 파일을 다운로드 받으세요.

HTML5Transform.html

See you again.