웹페이지를 디자인 할 때 버튼을 누르거나 글에 커서를 가져다 댈때 그냥 색이 바뀌거나 크기만 바뀌는 것은 꽤나 정적인 변화라고 할 수 있다. 그렇다면 좀 더 동적인 변화로 인터랙티브한 경험을 제공하거나 사용자 경험을 향상시키려면 어떻게 해야할까?
그 중 한가지 방법은 바로 transform 속성을 사용하는 것이다.
인테리어로 비유하자면 공간의 구조나 가구를 재배치하여 분위기를 바꾸는 것과 비슷하다고 할 수 있다.
예를 들어 그냥 정자세로 걸린 액자와 약간 기울여 걸린 액자의 분위기가 전혀 다른 것처럼 말이다.
transform 속성의 주요 기능
- 이동 (translate): 요소를 수평 또는 수직으로 이동합니다.
- 회전 (rotate): 요소를 지정된 각도로 회전합니다.
- 크기 조절 (scale): 요소의 크기를 확대하거나 축소합니다.
- 기울이기 (skew): 요소를 지정된 각도로 기울입니다.
- 원근법 (perspective): 3D 변형 효과를 줄 때 원근감을 추가합니다.
- translate():
- translateX(x): 요소를 x축 방향으로 이동합니다.
- translateY(y): 요소를 y축 방향으로 이동합니다.
- translate(x, y): 요소를 x축, y축 방향으로 동시에 이동합니다.
- rotate():
- rotate(angle): 요소를 지정된 각도(deg, rad, turn)로 회전합니다.
- scale():
- scaleX(x): 요소를 x축 방향으로 x배만큼 크기 조절합니다.
- scaleY(y): 요소를 y축 방향으로 y배만큼 크기 조절합니다.
- scale(x, y): 요소를 x축, y축 방향으로 동시에 크기 조절합니다.
- skew():
- skewX(angle): 요소를 x축 방향으로 지정된 각도로 기울입니다.
- skewY(angle): 요소를 y축 방향으로 지정된 각도로 기울입니다.
- skew(x-angle, y-angle): 요소를 x축, y축 방향으로 동시에 기울입니다.
- perspective():
- perspective(length): 3D 변형 효과를 줄 때 원근감을 설정합니다.
CSS
.box {
width: 100px;
height: 100px;
background-color: aqua;
margin: 20px;
border: 1px solid;
}
.translate {
transform: translate(50px, 20px); /* 오른쪽으로 50px, 아래로 20px 이동 */
}
.rotate {
transform: rotate(45deg); /* 45도 회전 */
}
.scale {
transform: scale(1.5, 0.8); /* 가로 1.5배, 세로 0.8배 크기 조절 */
}
.skew {
transform: skew(20deg, 10deg); /* 가로 20도, 세로 10도 기울이기 */
}HTML
<body>
<div class="box">Original</div>
<div class="box translate">translate</div>
<div class="box rotate">rotate</div>
<div class="box scale">scale</div>
<div class="box skew">skew</div>
</body>
우리가 스마트폰을 사용하거나 하면 터치하려는 앱의 색이나 크기가 변하는 것을 볼 수 있다.
웹페이지 상에서도 그런 효과를 줄 수 있다.
2. 마우스 호버 효과
.button {
display: inline-block;
margin: 20px;
padding: 10px 20px;
background-color: white;
transition: transform 0.3s ease;
}
.button:hover {
transform: scale(1.1); /* 마우스 호버 시 1.1배 확대 */
background-color: gray;
}<body>
<button class="button">버튼</button>
</body>
또 마우스를 가져다 대면 카드가 뒤집어져서 숨겨진 내용을 보이도록 하는 방식으로도 활용 할 수 있다.
3. 3D 변형 효과:
.card {
width: 200px;
height: 150px;
perspective: 500px; /* 원근감 설정 */
font-size: 50px;
}
.card-inner {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
transform-style: preserve-3d; /* 3D 변형 유지 */
}
.card:hover .card-inner {
transform: rotateY(180deg); /* 마우스 호버 시 Y축으로 180도 회전 */
}
.card-front,
.card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /* 뒷면 숨김 */
}
.card-front {
background-color: lightcoral;
}
.card-back {
background-color: lightseagreen;
transform: rotateY(180deg); /* 뒷면 180도 회전 */
}<body>
<div class="card">
<div class="card-inner">
<div class="card-front">앞면</div>
<div class="card-back">뒷면</div>
</div>
</div>
</body>
우선 .card 클래스는 가장 밖의 부모 태그인 <div>의 속성을 설정하는 역할을 한다.
.card {
width: 200px;
height: 150px;
perspective: 500px; /* 원근감 설정 */
font-size: 20px;
}이중 font-size는 상속되어 자식 요소의 폰트 사이즈를 결정하게 된다.
width, height, perspective는 상속되지 않는 부모 요소 고유 속성이다.
이중 perspective는 3D 변환 효과가 적용되는 자식 요소들에게 원근감을 부여하는 속성인데 부모 요소의 크기에 따라 설정하는 값을 다르게 해야한다. 커질 수록 크게, 작아질 수록 작게.
.card-inner {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
transform-style: preserve-3d; /* 3D 변형 유지 */
}
transition: transform 0.5s ease
- transition 속성은 요소의 속성 변화에 애니메이션 효과를 적용하는데 transform 속성이 변화할 때 0.5초 동안 ease 시간 함수를 사용하여 부드럽게 변화하도록 설정을 한 것이다.
- ease 시간 함수는 애니메이션이 시작할 때 느리게 시작하고, 중간에 빨라졌다가 끝날 때 다시 느려지는 효과를 준다.
- 만약에 이 효과가 없다면 마우스를 hover하자마자 바로 뒷면으로 전환될 것이며 0.5s가 아니라 2s 같이 시간을 늘린다면 뒤집히는 속도가 느려져서 아주 천천히 뒤집히게 될 것이다.
transform-style: preserve-3d
- 이 속성은 자식 요소들이 3D 공간에 위치하도록 설정한다.
- .card-inner의 자식 요소인 .card-front와 .card-back가 3D 공간에서 서로 겹쳐서 배치되고 회전할 수 있도록 한다.
- 이 속성이 없으면 자식 요소들이 2D 평면에 위치하게 되어 3D 회전 효과가 제대로 나타나지 않는다.
이처럼 뒤집히기는 하지만 뒷면이 나타나지 않고 그냥 앞면만 뒤집히게 된다.
.card:hover .card-inner {
transform: rotateY(180deg); /* 마우스 호버 시 Y축으로 180도 회전 */
}
.card:hover와 .card-inner 클래스를 동시에 적용한 것을 볼 수 있다.
즉, .card 요소에 마우스 커서가 올라갔을 때 .card-inner 요소에 transform: rotateY(180deg) 스타일을 적용한다는 뜻이다.
만약에 transform: rotateY를 50deg(deg는 'degree'의 약자다)나 120deg 정도로 설정한다면 어떻게 될까?
이렇게 뒤집히다 만다.
각도를 좀더 추가해서 300도, 360도로 설정하면 뒤집혔다가 다시 뒤집히는 것을 볼 수 있다. 360도는 원래 상태로 돌아가기 때문에 다시 앞면으로 표시된다. 여기서 각도를 1000도 같이 더 늘리면 마치 팽이처럼 빙빙 돌게 된다.
.card-front,
.card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /* 뒷면 숨김 */
}position: absolute
- 이 속성은 요소를 절대 위치에 배치하는데 절대 위치는 부모 요소(.card-inner)를 기준으로 요소의 위치를 설정한다.
- 이렇게 하면 .card-front와 .card-back 요소가 정확히 같은 위치에 겹쳐서 표시된다. 즉, 앞면과 뒷면이 정확히 겹쳐서 보이게 되는 것이다.
backface-visibility: hidden
- 이 속성은 3D 변환 시 요소의 뒷면을 숨기는 역할을 한다.
- 카드를 뒤집는 효과를 만들 때, 카드가 180도 회전했을 때 뒷면이 보이는 것을 방지하게 되는데 만약에 이 속성이 없으면 뒷면이 이미 앞면을 덮어버려서 애초에 뒷면으로만 보이는 상태가 된다.
만약에 코드를 아래와 같이 수정한다면
.card-front,
.card-back {
width: 100%;
height: 100%;
position: relative;
}
이렇게 상대 위치가 되어 앞면과 뒷면이 따로 공간을 차지하게 되고 뒷면이 보이는 상태라 둘이 같이 뒤집히게 된다.
이 상황에서 backface-visibility: hidden를 다시 넣어주면
.card-front,
.card-back {
width: 100%;
height: 100%;
position: relative;
backface-visibility: hidden; /* 뒷면 숨김 */
}
이렇게 기존에는 앞면만 보이다가 뒷면으로 뒤집힐때 각각의 위치에서 표시가 되버리게 된다.
때문에 카드 뒤집기 효과를 사용할 때 제자리에서 뒤집히게 하려면 위에 나온 속성들이 반드시 필요하다.
.card-front {
background-color: lightcoral;
}
.card-back {
background-color: lightseagreen;
transform: rotateY(180deg); 뒷면 180도 회전 */
}transform: rotateY(180deg)
해당 부분으로 뒷면을 180도 돌려놓아야 위치 상으로 뒷면이 180도 돌아서 앞면의 뒤쪽에 붙어있는 듯한 효과를 주게 된다. 중요한 점은 이런 회전이 실제 현실처럼 물리적으로 존재하는 것이 아닌 그저 시각적인 효과로 붙어있는 듯한 착시를 줄 뿐이라는 점이다. 때문에 정확한 효과를 위해서는 각각의 수치들이 딱 맞아 떨어져야 한다.
만약에 이미 20도 정도 뒤집힌 카드가 뒷면으로 뒤집히는 모습을 연출하고 싶다면
.card-front {
background-color: lightcoral;
transform: rotateY(20deg);
}와 같이 card-front에 20도 기울기를 주면 된다.
skew() 속성을 통해서 기울어진 카드가 회전하는 것도 표현할 수 있다.
.card {
margin: 100px;
width: 200px;
height: 150px;
perspective: 500px; /* 원근감 설정 */
font-size: 20px;
}
.card-inner {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
transform-style: preserve-3d; /* 3D 변형 유지 */
}
.card:hover .card-inner {
transform: rotateY(180deg); /* 마우스 호버 시 Y축으로 180도 회전*/
}
.card-front,
.card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /* 뒷면 숨김 */
}
.card-front {
background-color: lightcoral;
transform: rotateY(20deg) skewY(20deg);
}
.card-back {
background-color: lightseagreen;
transform: rotateY(180deg) skewY(-20deg);
}단 카드의 앞과 뒤가 대칭이 되야 하기때문에 기울어진 각도는 서로 양수와 음수값을 가져야한다.
'CSS > css 심화' 카테고리의 다른 글
| CSS 심화 공부(7) - flex item 속성(1) : flex item order (0) | 2025.03.12 |
|---|---|
| CSS 심화 공부(6) - 플렉스 컨테이너의 속성(2) 정렬 방식 : justify-content, align-items, align-content (0) | 2025.03.12 |
| CSS 심화 공부(5) - 플렉스 컨테이너의 속성(1) 레이아웃 방식 : display, direction, wrap, flow (0) | 2025.03.12 |
| CSS 심화 공부(4) - Flexbox(플렉스 박스) (0) | 2025.03.12 |
| CSS 심화 공부(3) - 동적 변화(animation) (0) | 2025.03.11 |