[CSS] 중앙 점을 기준으로 요소 확장

크기를 0으로 설정한 후 클릭하여 확대하는 영역을 만들었었다.

	overflow: hidden;
	top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transition: 0.5s;

	&.open{
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

위와 같이 클릭해서 className을 주어 해당 class에 width,height를 100%로 변경하는 형태로 만들었었다.
영역의 가운데에서부터 확대되는 형식으로 구현하고싶었다.

문제점 : 영역 안의 사진, 글자와 같은 내용은 크기가 줄지 않아 확대, 축소될때 글자의 줄 수가 바뀌는 등의 어색함이 있다.

	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s;
	transform: scale(0);

	&.open{
        transform: scale(1);
    }

해결방안 : transform: scale()을 이용해 영역과 안의 모든내용의 크기를 함께 변경

위처럼 transform: scale()을 사용하면 자동으로 중앙을 기준으로 영역의 크기가 변경되어 top, left를 따로 설정할 필요도 없어진다.