앱 UI 레이어 3D 호버 에니메이션

.app-ui가 부모요소가 되어야

밑의 이미는 자식요소 .app-ui img

왼쪽상단 기준으로 모일것임

transform:rotate()만 하면 자연스럽지 않기 때문에 skew속성도 함께 적용

보더 애니메이션 네비게이션 호버 이펙트

a태그는 인라인요소이므로 a의 크기만큼

border가 늘어나는 것이 아니라

before나 after가상클래스로

height와 width를 가지고 있는 background가 커지고 작아지는 상태

SNS 아이콘 애니메이션

.sns a:before{
width:
height:
top:
right:
}

위의 네가지를 조절하면 배경이 차오르는 위치를 바꿀 수 있다!

before, after설정시 중요포인트!

선택자 -> 부모요소 : position:relative

before,after설정 한 선택자 -> 자식요소 : position:absolute

a:hover:before 띄어쓰기 없이 작성한다면

a에 마우스 올렸을 때 before

따라서 자기 자신을 의미