Transform - 위치, 모양 크기 지정
- 회전(rotation), 비틀기(skewing), 확대/축소(scaling), 평면과 3D 공간에서 이동(tranlation) 한다
1. transform 속성
1) transform-origin
- 원점의 위치를 지정.
- 기본값은 엘리먼트의 왼쪽(left) 위(top)
- 회전, 확대/축소, 비틀기와 같이 한 점을 기준으로 수행되는 변환에 지정
2) transform
- 엘리먼트에 적용될 변환 지정
- 몇 가지 변환을 공백으로 구분하여 순서대로 지정해 놓음으로 여러가지 변환을 동시에 적용
2. 구현
1) 이미지 시계 방향으로 90도 회전
2) 이미지 비틀고 오른쪽으로 100px 이동
'Front-End > HTML5 + CSS' 카테고리의 다른 글
| [HTML] 이전 웹 브라우저에서 HTML5 사용 (0) | 2016.12.19 |
|---|---|
| [HTML5] meta 태그의 viewport 속성 (0) | 2016.12.19 |
| [CSS] overflow-x /overflow-y (0) | 2016.12.18 |
| [CSS3] @media 쿼리 (0) | 2016.12.18 |
| [CSS] @media 타입 (0) | 2016.12.18 |
리딩리드