CSS transform

주로 애니메이션 효과를 위해 사용함

이것도 쓸까.. 내가..

 

코드 정리좀 하고 

 

 

 

 

 

 

만들었다 

 

        transform: translateX(400px);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

오 오른쪽으로 400px 이동함 

        transform: translateY(400px);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

밑으로 이동되는거 확인함

 

그럼 XY 한번에 줄수도 있겠네

 

        transform: translate(400px, 400px);

 

 

 

 

 

 

 

 

 

 

 

 

 

scale 을 쓰게 되면 요소 자체를 키울수 있음

        transform: scale(2);

 

 

 

 

 

커졌다 0.5도 소수점도 가능하다고함

 

 

scaleX 를 스면 엑스 축 길이가 0.5 배가됨

        transform: scaleX(0.5);

 

 

 

와이축은 그대로 지만 엑스 축 길이는 작아짐

 

 

회전도 가능하다고함 

 

 

최초의 요소적용할때 transition : transform 을 적어준다음

마우스 올려 놓으면 360도 돌아라 3초 동안  X 축으로 돌아가는거 확인함

y축으로 돌리고 싶으면 rotateY  

근데 이것도 쓸려나.. 안쓸거 같은데 나는

 

 

그냥 rotate(360deg) 쓰면 시계 방향으로 돌아감 - 360 쓰면 반대방향 으로 돌아감

근데 이것도 안쓸거 같다 나는

 

 

 

코드 다시 정리좀 하고

 

 

 

 

 

        transform: translateX(100px);

 

를 추가하고 

 

빨간색 div 박스가 파란색 div 를 침범한걸 알수 있음

 

scale 도 마찬가지임

 

트랜스폼의 특징은 기존의 레이아웃에 영향을 주지 않음

mdn 에 많은 예제가 있다고 하는데 잘 안쓴다고함