CSS_17_transform 속성

17_transform속성_2/3차원 변형

transform 속성을 사용하여 사용자가 선택한 요소의 크기를 변경(scale)하거나, 기울기(skew), 회전(rotate), 위치 이동(translate)을 하기 위한 속성

scale : 크기를 조정하기 위한 속성으로 %를 소수점으로 환산하여 값을 입력하고, 요소의 가운데를 기준으로 크기가 커지거나 작아짐

rotate : 선택한 요소를 회전하기 위한 속성이며 각도 입력시 deg 단위를 사용

skew : 선택한 요소를 기우링기 위한 속성이며 각도 입력시 deg 단위를 사용

translate : 선택한 요소의 위치를 이동하기 위한 속성이며 position:relative와 같은 현재 위치를 기준으로 요소가 이동됨(x/y/r값 설정)

더보기+

prefixfree.min.js : CSS의 새로운 속성이 추가되면 코드를 작성 할 때마다 접두사를 붙여주게 되는데, 브라우저에서 지원하지 않는 속성은 화면에 표시되지 않기 때문에 실험적으로 '접두사'를 붙여주어 임시로 적용 할 수 있게 함

아래 브라우저별 접두사를 새로운 속성 작성 시 매번 작성하기 번거롭기 때문에 js파일을 html 문서에 연결하면 자동으로 접두사가 붙어 문제를 해결 할 수 있음

새로나온 CSS속성은 항상 caniuse.com에서 조회를 한 후 브라우저 버전별로 속성이 지원되는지 여부를 확인하고 사용함(빨강색이 미지원 버전)

-ms- : 엣지, -o- : 오페라, -webkit- : 크롬, 사파리, -moz- : 모질라 파이어폭스

변형 속성과 애니메이션 속성을 활용하여 이미지 갤러리 구현하기
이미지 4장과 라디오 버튼을 사용하여 클릭시 해당하는 사진이 각각 슬라이드 되면서 나오도록 함

1 2 3 4