1. 2차원 변형

transform :

translateX(50px); / translateY / translate( 50px, 50px )

--> 좌우 / 상하 / 대각선 움직임

 

rotate(180deg);

--> 시계방향으로 회전시키기

 

2. 3차원 변형

transform : 

perspective(300px)

--> 원근법 적용

 

perspective rotateX / perspective rotateY / perspective rotateZ

--> X축 회전 / Y축 회전 / Z축 회전

 

perspective(300px) rotate3d(0.5,0.5,0.5,45deg)

--> 전부 회전

 

3. 시간지연

transition-duration : 2s;

-->변형이 2초동안 진행됨

 

 

+ Recent posts