[css3] translate 변형 함수 - 해당하는 요소 이동

1. 개념

translate 변형 함수 - 해당하는 요소 이동

translate는 변형 함수로써 2차원 , 3차원에서 x축 , y축 , z축으로 요소를 이동시키고자 할 경우에 사용

2. 태그

translate

html5 코드

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

< ! DOCTYPE html> < html lang = "kr" > < head > < meta charset = "utf-8" > < title > 키보드와 하루 < /title > < style > img { width : 150px ; } < /style > < /head > < body > < div > < img src = "home.jpg" >< /div > 1 < div style =' transform : translateX(30px) ' > < img src = "home.jpg" > < /div > 2 < div style =' transform : translateY(20px) ' > < img src = "home.jpg" > < /div > 3 < div style =' transform : translate(30px,50px) ' > < img src = "home.jpg" > < /div > < /body > < /html >

코드 설명

1

transform : translateX(20px)

translateY -  사용예제

translateX는 해당하는 요소를 지정한 크기만큼 x축 방향으로 이동시킵니다.
위에서 보시는 것처럼 해당하는 그림이 x축으로 30px만큼 이동해 있음을 알 수 있습니다.
이 애니메이션 효과는 보통에 마우스를 올렸을 때 이미지를 크게 보인다든가 다른 곳으로 위치하게 하는지에 많이 사용됩니다.

2

transform : translateY(30px)

translate - 사용예제

translate는 Y축으로 이동하는 것입니다.
위에서는 translateY(20px)로 Y축 방향으로 이동된 것을 확인하실 수 있습니다.
보통 이러한 요소 이동시키기는 정적인 부분에서 사용되지 않고 , 동적인 이벤트를 통해 애니메이션을 주고자 할 경우에 사용하게 됩니다.

3

transform : translate(30px,50px)

translate - 사용예제

translate는 X축 , Y축으로 지정한 크기만큼 이동시키는 것입니다.
translateX 와 translateY로 따로따로 지정할 수 있는 것을 한번에 지정할 수 있도록 한 것입니다.
만약에 3차원으로 해서 Z축으로 까지 설정해서 원근감으로 표현하고자 할 경우에는 translate3d를 사용해서 X축 , Y축 , Z축을 입력해 주시면 됩니다.