[TIL] 웹개발 종합반 3~5주차, CSS를 이용한 Container 회전

 

https://teamsparta.notion.site/6f9af2db82c349209aa0238be87808b2

[왕초보] 웹개발 종합반 | Notion

웹개발 종합반 3~5주차 과제 완료, CSS를 이용한 Container 회전

 

--

 

학습 키워드: Github Pages, Firebase, CORS, transform

 

1. Github Pages

 - Github에서 Pages를 통해 repo 내의 특정 branch를 호스팅 할 수 있다. 하나의 repo에서 한 개의 호스팅만 지원하기 때문에 이번과 같이 과제 프로젝트 여럿을 하나의 repo에 몰아넣으면 귀찮아진다.

 

2. Firebase

 - Google이 지원하는 클라우드 데이터베이스 서비스다. 이전에 React, Node, express 등을 사용한 웹사이트 개발 당시에 firebase로 유저 로그인 정보를 저장한 적이 있다. 초기 설정은 처음해봤는데 권한 설정이나 script 위치 등등 자세히 알아봐야할 부분들이 있었다.

 - get은 getDocs(), post는 addDoc() 혹은 setDoc() 같은 method들을 이용한다. setDoc()이 create, delete, edit을 모두 담당한다고 하는데 이번 과제에서는 addDoc()만 사용해봤다.

 

3. Transform (CSS)

 - CSS에도 transform이 있다는걸 알았다. div 태그의 style에 transform을 추가하여 div를 회전시키는 방법을 배웠다.

$(".card").each(function(i){
    $(this).mousemove (function(e) {
        let x = e.offsetX;
        let y = e.offsetY;
        let rotateY = -1/5 * x + 20;
        let rotateX = 4/30 * y - 20;
        $(this).css({'transform':`perspective(350px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`}).css({'transition':`none`});
    });
    $(this).mouseleave (function(e) {
        $(this).css({'transform':`perspective(350px) rotateX(0deg) rotateY(0deg)`}).css({'transition':`ease 1s`});
    });
});

<div class="container">
	<div class="card" id="card0"></div>
	<div class="card" id="card1"></div>
</div>

 - card 클래스를 가지는 모든 태그에 각각 mousemove 액션을 지정해주고, 마우스 포인터가 해당 컨테이너에 진입해서 움직이는 동안 좌표를 가져와 transfrom을 통해 회전시키는 방식이다. 여기서 transform의 perspective 는 회전 시 좀 더 자연스러운 관점(perspective)를 만들어준다.