transform : translate - 요소 이동
html)
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 32 33 34 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> <style> img { width: 200px; height: 200px; /* translate 이동 transform: translate(x,y) x,y 위치로 이동 transform: translate3d(x,y,z) x,y,z 위치로 이동 transform: translateX(x) x 위치로 이동 transform: translateY(y) y 위치로 이동 transform: translateZ(z) z 위치로 이동 */ -webkit-transform: translate(50px, 50px); -moz-transform: translate(50px, 50px); -ms-transform: translate(50px, 50px); -o-transform: translate(50px, 50px); transform: translate(50px, 50px); } </style> </head> <body> <img src="images/testimage.jpg" /> </body> </html> | cs |
결과
이미지의 위치가 30, 30 이동한다
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 transform : rotate - 요소 회전하기 (0) | 2017.06.23 |
|---|---|
| HTML5/CSS3 transform : scale - 요소 크기변경 (0) | 2017.06.22 |
| HTML5/CSS3 animation : 애니메이션 (0) | 2017.06.20 |
| HTML5/CSS3 transition : 요소의 속성이 바뀔때 전환되는 효과를 보여준다 (0) | 2017.06.19 |
| HTML5/CSS3 그라디언트 (0) | 2017.06.18 |