목록CSS/Problem (1)
타쿠꺼
[●]중앙으로부터 확장하는 div애니메이션
해결1 div의 top 위치를 함께 transition 시킨다. div {position: absolute;top: 0px;width: 100px;height: 0px;transition: all .5s;} div:hover {top: -50px;height: 100px;} div의 top이 위로 올라가면서 height의 크기가 커지기 때문에 가운데서 확장되는 효과를 볼 수 있다. 해결2 사실 top, left 등을 변화시키는건 시스템에 무리를 준다.transform을 사용하면 된다. transform은 기준 앵커값이 요소의 중앙이므로, scale(0) -> scale(1)로 변화시키면 중앙에서부터 원래 사이즈로 확장되는 효과를 볼 수 있다.
CSS/Problem
2016. 5. 28. 02:53