[UI/UX]패스트캠퍼스 챌린지 42일차 - css transtorm
오늘은 41일차!
9일 남았당 ㅎㅎ
오늘은 뺑글뺑글 돌아가고 각도가 변화되는 기능에 대해 배웠다
되게 어렵고 개발자가 대단해보이는 기능이였는데
막상 해보니까별거 아니였다 ㅎㅅㅎ
진짜 진지하게 이쪽으로 갈까,,다시,,,
싶지만,,,후 2년은 채워서 경력을 만들어야 하기에,,
악 모르곘다 인생,,
transtorm
-rotate
: 회전을 시켜주는 함수, 추가적인 함수를 띄워쓰기를 통해 구분
rotateX는 3차원 x축으로 움직인다. => 하지만 perspective꼭 이용해야한다.
-scale(x,y)
: x만큼 커지는 것, y배 만큼 가로로 늘어난다.
-hover
: 마우스를 가져다대면 그제서야 rotate와 scale이 적용되는 것
-transition
:1x => 전상태와 후상태를 자연스럽게 만들어줌 x는 시간초만큼 움직임
*원본의 요소에서 꼭 붙어줘야지 끝날때도 자연스럽게 끝난다.
html
<div class="container">
<div class="item">don't worry</div>
<div class="tiem">BE</div>
<div class="item">happy</div>
</div>
css
.container .item{
width:80px;
height:80px;
margin:30px;
padding:10px;
border-radius:10px;
background-color:orange;
transition:1s;
color:white;
}
.container .item:nth-child(1):hover{
transform:rotate(20deg) scale(1.5,1);
}
.container .item:nth-child(2){
transform:perspective(500px) rotateX(50deg);
}
.container .item:nth-child(3){
}
아주 간단한 html..
내가 가로 잘못닫고 스펠링 틀려서 ㅋㅋㅋ
왜안되지 하고 한참 고민했었던,,
하나하나 다 살펴봐야했던,, 쓸 때 제대로 쓰자 :)
저 don't worry가 마우스 올려야 대는데 캡쳐가 어려워서 ,, 살짝 기우신거 보이죠 ㅎ
매일쓰는게 별거아닌거 같지만 참 습관이 무섭다
하루에 한번은 머릿속에 꼭 써야지 생각 중..!
강의를 옛날에 비해 적게 듣지만
(많이 들으면 한도초과요)
매일매일 해서 이제 외워가고 있다!
전에 썼던거도 생각하면서 하는 중 ㅇ_ㅇ!
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.