일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Archives
- Today
- Total
Tags
- transform 효과
- CSS3 효과
- 속성 scale
- Math 객체
- 속성 ease
- CSS
- css3
- zoom:1
- transform 전환효과
- ie7 inline
- css 줄바꿈
- 레이아웃 잡기
- String 객체
- footer 고정
- 한빛미디어
- Array 객체
- css로 줌인 효과 주기
- Number 객체
- html br
- Date 객체
- 모던 웹을 위한 JavaScript + jQuery 입문
- CSS 효과주기
- ie7 핵
- html 줄바꿈
- float 깨짐
- display:inline-block
- Object 객체
- HTML
- 코딩 예제
- zoomin 효과
목록transform 효과 (1)
마크업개발 메모장
CSS3 transform으로 zoomin 효과 내기
전에 transform으로 이미지 위아래로 움직이는 법을 포스팅 한적이 있다.하지만 그 후에 잘 쓰지 않게되서 금방 까먹어버렸;;;기에ㅠㅠ다시 복습하는 차원에서 공부해보았다. 오늘은 이미지를 확대/축소 시킬수 있는 zoomin효과를 만들어봤다.이미지에 마우스 오버가 되거나 스크롤할때 zoomin 효과를 주면 별거 아니지만 좀 있어보이는 것 같다. ㅋㅋ아.. 하지만 이미지는 잘못 사용하면 위험하므로 예제는 텍스트로 만들었다ㅠㅠ이미지로 해야한다면 background로 넣어주면 된다는 것~!! 생각보다 어렵지 않다! 연습예제 > http://jsfiddle.net/dmyjbbk9/3/ 여기서 중요한 것은!1. zoomin이 되는 엘리먼트를 감싸는 부모 엘리먼트에 overflow : hidden ; 을 꼭 넣어..
HTML/CSS
2015. 7. 17. 12:55