css
CSS transform은 웹페이지에서 요소의 모양, 크기, 위치 등을 변형 시키기 위한 속성입니다.
주로 애니메이션 및 레이아웃 조정에 사용됩니다.
CSS transform의 주요 속성과 종류에 대한 설명입니다.
CSS transform 의 주요 속성에 대한 예제입니다.
아래는 예제에 공통적으로 적용되는 HTML 과 CSS 입니다.
비교를 위해 body에 border를 설정했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
body {
margin: 200px;
border: 2px solid black;
}
.box {
width: 300px;
height: 300px;
margin: 30px auto;
text-align: center;
font-size: 30px;
background-color: orange;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>transform 속성을 설정하기 전 입니다.
translate 속성은 설정 값 만큼 요소를 이동 시킵니다.
.box {
transform: translate(50px, 30px);
}translate 속성으로 오른쪽으로 50px, 아래쪽으로 30px 이동 했습니다.
rotate 속성은 설정 값 만큼 요소를 회전 시킵니다.
.box {
transform: rotate(45deg);
}요소를 45도 각도로 회전 했습니다.
scale 속성은 설정 값 만큼 요소의 크기를 조절합니다.
.box {
transform: scale(1.5);
}요소의 크기를 1.5배 확대하였습니다.
skew 속성은 설정 값 만큼 요소를 기울입니다.
.box {
transform: skew(30deg, 20deg);
}첫 번째 값(30deg): X축 방향으로 30도만큼 기울이고,
두 번째 값(20deg): Y축 방향으로 20도만큼 기울기를 주었습니다.
perspective 속성은 원근법을 설정하는 데 사용되며,
해당 속성이 적용된 부모 요소의 하위 자식 요소에게 3D 변형 효과가 나타납니다.
즉 perspective 속성은 부모 요소에 주어야 합니다.
body {
perspective: 1000px;
}
.box {
transform: rotateY(45deg);
}부모 요소인 body 에 perspective 속성을 주었고,
자식 요소인 .box 에 Y축을 기준으로 45도 만큼 회전하는 변형을 주었습니다.
matrix 속성은 matrix(a, b, c, d, tx, ty) 를 이용하여 2D 변형을 행렬로 적용합니다.
a와 d는 각각 X와 Y축에서의 크기를 나타냅니다.
b와 c는 각각 X와 Y축에서의 기울임을 나타냅니다.
tx와 ty는 각각 X와 Y축에서의 이동을 나타냅니다.
.box {
transform: matrix(1, 0.5, -0.5, 1, 100, 100);
}크기: X와 Y축 모두 1배씩 확대합니다. (a=1, d=1)
기울임: X축에서 0.5만큼, Y축에서 -0.5만큼 기울입니다. (b=0.5, c=-0.5)
이동: X와 Y축 모두 100만큼 이동합니다. (tx=100, ty=100)
여러 변형을 한 줄에 조합 할 수 있습니다.
.box {
transform: translate(20px, 20px) rotate(45deg) scale(1.2);
}translate(20px, 20px): X축으로 20px, Y축으로 20px 이동합니다.
rotate(45deg): 45도만큼 시계 방향으로 회전합니다.
scale(1.2): 크기를 1.2배 확대합니다.
CSS transform 을 이용하면 웹 요소에 다양한 변형 효과를 부여하여 동적이고 멋진 스타일을 만들 수 있습니다. 각 속성은 원하는 효과에 따라 조절하여 사용하며, 여러 속성을 조합함으로써 다양한 시각적 변화를 구현할 수 있습니다.
들어가며 소프트웨어가 처리해야 하는 데이터 양이 늘어날수록, 단순히 기능 구현만으로는 성능과 효율을 보장하기 어렵습니다. 특히…
들어가며 소프트웨어를 구현할 때 성능 최적화나 안정성을 높이려면, 단순히 고수준 코드만 신경 쓰는 것을 넘어…
들어가며 소프트웨어가 복잡해질수록, 단순히 알고리즘의 시간복잡도만으로는 모든 문제를 해결할 수 없습니다. 특히 운영체제 수준에서는 다중…
들어가며 복잡한 소프트웨어가 원활히 동작하려면 단순히 코드만 잘 짜는 것으로는 부족합니다. 트랜잭션 처리나 대규모 데이터…
들어가며 소프트웨어를 개발할 때 메모리 관리 방식은 프로그램의 안정성과 성능을 좌우하는 핵심 요소입니다. 특히 자바스크립트,…
들어가며 소프트웨어 개발자는 코드가 어떻게 실행되는지 정확히 이해해야 할 필요가 있습니다. 우리가 작성한 프로그램은 결국…