css transform을 활용하여 역동적인 UI 구현하기 (6)

css transform을 활용하여 역동적인 UI 구현하기 (6) — #csstransform #UI제작 웹사이트 디자인 소개 및 학습목표 디자인소개 패스트 캠퍼스 "최성일"...

#SVG UI#Naver Blog

#csstransform #UI제작

웹사이트 디자인 소개 및 학습목표

디자인소개

패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리한 글입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.

처음부터 끝까지 하나 하나 손코딩 하는 모습을 보여드릴 것이며. 이전글을 보고오시면 더욱 이해가 빠릅니다.

학습목표

사용되는언어

HTML

CSS

HTML

<ul class="panel"> <li class="on"> <div class="bg"></div> </li> <li> <div class="bg"></div> </li> <li> <div class="bg"></div> </li> <li> <div class="bg"></div> </li> </ul>	li.onli는 회전시킬 패널이다. 이 중 한 곳에 calss="on"을 걸어준다.

CSS

패널 숨기기

.bg{ opacity:0; }	.bg전체에 opacity:0;을 걸어 패널을 숨겨준다\* class="on"인 li bg만 나타나게 구현할 것이다

.on 인터렉션 구현하기

.li { &.on .bg{ transform: translate(0%) rotate(0deg); opacity:1; } }	li.on 패널만 보이도록 설정opacity:1; 을 준다

.up 인터렉션 구현하기

.li { &.on .up{ transform:translateY(-80%) rotateX(50deg); opacity: 0; } }	.up패널translateY(-80%)를 주어 패널을 올린다rotateX(50deg)를 주어 패널 아랫 부분이 위로 가면서 회전한다.opacity:0; 점차 사라지게 표현한다

감이 안잡힌다면 임의로 두개의 li태그에 on과 up을 주어 직접 확인해 보면된다.

.down 인터렉션 구현하기

.li { &.down .bg{ transform:translateY(80%) rotateX(-50deg); opacity: 0; } }	.up패널translateY(80%)를 주어 패널을 내린다rotateX(-50deg)를 주어 패널 윗부분이 아래로 가면서 회전한다.opacity:0; 점차 사라지게 표현한다

역시나 임의로 2개의 li에 .on과 .down을 넣었다.

이제 모든 인터렉티브 구현 준비는 끝이 났다. 남은건 JS를 통해 버튼을 누를 때 패널이 돌아가도록 구현, SVG 구현만 남았다.

복습

짚어갈 포인트