[CSS3] Transform - 위치, 모양 크기 지정

Front-End/HTML5 + CSS

[CSS3] Transform - 위치, 모양 크기 지정

리딩리드 2016. 12. 18. 20:31

Transform - 위치, 모양 크기 지정

- 회전(rotation), 비틀기(skewing), 확대/축소(scaling), 평면과 3D 공간에서 이동(tranlation) 한다

1. transform 속성

1) transform-origin

- 원점의 위치를 지정.

- 기본값은 엘리먼트의 왼쪽(left) 위(top)

- 회전, 확대/축소, 비틀기와 같이 한 점을 기준으로 수행되는 변환에 지정

2) transform

- 엘리먼트에 적용될 변환 지정

- 몇 가지 변환을 공백으로 구분하여 순서대로 지정해 놓음으로 여러가지 변환을 동시에 적용

2. 구현

1) 이미지 시계 방향으로 90도 회전

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #transform_img1{ transform: rotate(90deg); transform-origin: bottom left; } </style> </head> <img src="NicoleRoss-Sugar__spice__and_cupcakes_are_nice-IMG_0801.jpg"> <img src="NicoleRoss-Sugar__spice__and_cupcakes_are_nice-IMG_0801.jpg" id="transform_img1">

2) 이미지 비틀고 오른쪽으로 100px 이동

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #transform_img1{ transform: rotate(90deg); transform-origin: bottom left; } #transform_img2{ transform: skewx(30deg) translatex(100px); transform-origin: bottom left; } </style> </head> <img src="NicoleRoss-Sugar__spice__and_cupcakes_are_nice-IMG_0801.jpg"> <img src="NicoleRoss-Sugar__spice__and_cupcakes_are_nice-IMG_0801.jpg" id="transform_img1"> <img src="NicoleRoss-Sugar__spice__and_cupcakes_are_nice-IMG_0801.jpg" id="transform_img2">