transform (한국어 번역 : {모양} 변화)
트랜스폼이 왜? 무엇?
-
좀아까 트랜지션이 변화되는 과정을 담는 애니매이션 효과이고 hover나 active 같은 아이들과 함께 쓰인다고 했다. 그럼 트랜스폼은? 범블비
-
html 문서의 element 들을 변경하여
모습이 변하는효과를 뜻한다.
모습, 직접적으로 모양이 변화하는! 모양이!모양모양모양이!!!!!!!!!!!!!!!!!!!!
실습
- 박스 div 하나 만들어서 css 에서 박스 내 트랜스폼을 적용해보자! 정사각형 박스를 한 20도 돌아간 모습으로 바꿔보는거다!
.box2 {
margin-top: 10em;
margin-left: 10em;
width: 10em;
height: 10em;
background-color: dodgerblue;
transform: rotate(20deg);
}-
rotate(deg) 처럼 다양한 트랜스폼들의 property 를 볼 수 있다.
: https://developer.mozilla.org/en-US/docs/Web/CSS/transform -
트랜스폼은 모양이 변화하니까 뭐 아까 트랜지션처럼 css states(hover,active,focus,visited) 랑 같이 안쓰여도 바뀔 수 있다.그러나,
-
트랜스폼은 트랜지션이랑 합쳤을 때 극대화된다. 그말인즉, 트랜스폼 - 트랜지션 - css states 이렇게 함께 쓰일 때 제대로 이다 라는 말뜻인듯? -
위의 코드는 단순 트랜스폼, 모양만 바뀌었다면.. 음 저기서 rotate(180deg); 했어. 분명 180도를 돌았겠지? 하지만 화면상에 봤을 때 우리 눈에는 변화 없이 그대로 인거 같아 보여! 인제 그럼 트랜지션을 써야 할 때!
.box2 {
margin-top: 10em;
margin-left: 10em;
width: 10em;
height: 10em;
background-color: dodgerblue;
transition: transform 1s ease-in-out;
}
.box2:hover {
transform: rotate(180deg);
}-
주의
: 아까 트랜지션 공부할 때 맨앞에 무엇을 바꿀 것인지 적었었다. 배경색을 콕 집는다든지, 아니면 다바꿔! all! 이렇게 했었다. 지금 뭘 바꾸나? 미리 hover 내 적용해 둔 트랜스폼 (모양을 요로코롬 바꿀 것이야) 을 바꾸는 것이다! 왜? 거기에 은은한 효과를 담을 거라서! -
트랜스폼: rotate(deg) 외에 옆에
뭔가 더 변형 효과를 넣어보기
: scale(숫자,숫자) / 사이즈를 줄일 수도 있다. rotate(deg) 옆에 쓰면 회전하는 동시에 사이즈도 줄어든다. 괄호안 첫번째 숫자는 가로로 늘어날 배수, 두번째 숫자는 세로로 늘어날 배수. 사이즈가 줄어드는 이유는 0이하 소수점으로 적용했기 때문! -
팁
: 회전을 줄 때 transform: rotate(deg); 도 있지만, rotate(1turn), rotate(5turn) 이렇게 적용 해줄 수도 있다. 다 구글 검색에 있다네 헐헐..
