자바스크립트를 이용해 작은 게임을 만들면서 알게된 속성인 transform.
mdn의 설명은 다음과 같다.
transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.
설명만 봤을 때, 좌표 공간은 솔직하게 아직 이해하기 힘들고 첫번째 줄이 눈에 띈다.
요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.
즉, transform은 요소를 변화하고 움직이게 하는 속성이라고 정리할 수 있겠다.
transform의 값
transform은 키 값으로 none 혹은 transform-function을 지정할 수 있다.
transform : none 혹은 transform-function
transform-function의 종류
실험을 위해 버튼을 먼저 만들어준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button></button>
</body>
</html>버튼의 css는 기본적으로 다음과 같다.
button {
width:50px;
height: 50px;
}- scale() - X 또는 Y축으로 확대/ 축소. 단 y축은 단독으로 사용할 수 없고 x축의 값을 반드시 적어야 한다. y축만을 변환하고 싶을 때는 x축에 1을 적어주고 사용한다.
transform : scale(x축 비율, y축 비율)
button {
width:50px;
height: 50px;
transform: scale(1.2); //크기를 1.2배로
}button {
width:50px;
height: 50px;
transform: scale(1, 1.2); //가로는 가만히 두고 세로를 1.2배로 늘림
}- rotate() - 지정 요소 회전. angle 데이터 타입의 값을 넣을 수 있다(deg, rad, grad, turn) 양의 값을 넣으면 시계방향으로 회전한다.
transform : rotate(angle 데이터 타입)
button {
width:50px;
height: 50px;
transform: rotate(50deg); // 시계방향으로 50도 회전
}- translate() - 지정 요소 X 또는 Y축으로 이동
transform:translate(x축 이동범위, y축 이동범위) x축으로 5px, y축으로 5px 이동시킴
button {
width:50px;
height: 50px;
transform: rotate(50deg); // 시계방향으로 50도 회전
}transform을 이용한 버튼 클릭 효과 만들기
기존의 버튼의 클릭은 밋밋한 느낌이었다.
버튼을 클릭했을 때, 좀 더 입체적인 효과를 줘보자. 다음과 같은 css코드를 추가해준다.
border-bottom: 5px solid black;다음을 추가하면 버튼이 마치 튀어나와있는 것처럼 보인다.
하지만 아직 부족하다. 버튼이 눌렸을 때, 즉, active 되었을 때 효과를 transform을 이용해 줘본다.
button:active {
transform: translateY(3px);
}
버튼을 클릭했을 때, 위 아래로 움직이는 것을 볼 수 있다. 여기서 좀 더 실감나는 효과를 줄 수 있게끔, 밑에 준 테두리의 크기도 줄여보자.
button:active {
transform: translateY(3px);
border-bottom: 2px solid black;
}
클릭했을 때, 마치 버튼이 정말 들어갔다 나오는 것 처럼 그럴듯 하게 만들어졌다. 여기에 transition도 추가해보자면
button {
box-sizing:border-box;
width:50px;
height: 50px;
border-bottom: 5px solid black;
transition: all 0.2s;
}
부드럽게 작동하는 것을 볼 수 있다.
느낀 점?
CSS의 세계는 정말 멀고도 험하구나~하고 느꼈다. 다 했다고 생각했는데 나중에 보면 '더 좋은 효과를 줄 수 있지 않을까'라며 왜 이렇게 고치고 싶은 부분이 많은지....transform을 통해 다양하고 재밌는 효과들을 줄 수 있을 것이라 생각된다. 또한 transition과 함께 사용했을 시, 더 부드럽고 자연스러운 효과를 줄 수 있다는 점이 매우 흥미로웠다. 블로그에 기록해뒀다가 나중에 써먹어야지...근데 솔직한 심정으로는, 실무 갔을 때 css는 누가 대신 해줬으면 좋겠다. 쿄쿄😚
