본문 바로가기
WEB기초/CSS

[CSS] CSS3 이용하기 (170410)

by 별토끼. 2017. 4. 10.
반응형


 CSS3 이용하기 


  • CSS3는 IE9이상에서 이용이 가능하다.

  • BorderRadius 속성 이용하기
- 모서리 부분을 반지름으로 잡아 둥글게 해주는 기능


** 실행 결과 **



  • Transition 이용하기
- transition 속성에는 property(background-color, width, height 등), duration, timing-function이 있다.

- 여러 개의 적용이 필요하면 all을 이용한다.

- transition1


** 출력 결과 **


 - 더 자세한 결과는 css3 > Step02_Transition2.html, 참고


- transition2


** 출력 결과 **


- transition3

- 5초 안에 종료되지만 각자 속도가 다 다르다.



** 출력 결과 **




  • transform
- translateX : x축으로 이동
- translateY : y축으로 이동
- rotate : 회전
- scale : 확대
- all을 이용하면 모두 적용이 가능하다.


** 출력 결과 **




반응형

'WEB기초 > CSS' 카테고리의 다른 글

[CSS] CSS3 이용하기 03 (170411)  (0) 2017.04.11
[CSS] CSS3 이용하기 02 (170410)  (0) 2017.04.10
[CSS] CSS 입문 03 (170327)  (0) 2017.03.27
[CSS] CSS 입문 02 (170324)  (0) 2017.03.24
[CSS] css 입문 01 (170323)  (2) 2017.03.23

댓글