2D 변환은 이동, 회전, 크기 조정 및 기울이기와 같은 요소 구조를 다시 변경하는 데 사용됩니다.
다음은 2D 변환 기능의 일부입니다 -
| 시니어 번호 | 값 및 설명 |
|---|---|
| 1 | 행렬(n,n,n,n,n,n) 6개의 값으로 행렬 변환을 정의하는 데 사용됩니다. |
| 2 | 번역(x,y) x축 및 y축과 함께 요소를 변환하는 데 사용됩니다. |
| 3 | 번역X(n) x축을 따라 요소를 변환하는 데 사용됩니다. |
| 4 | 번역Y(n) y축을 따라 요소를 변환하는 데 사용됩니다. |
| 5 | 스케일(x,y) 요소의 너비와 높이를 변경하는 데 사용됩니다. |
| 6 | 스케일X(n) 요소의 너비를 변경하는 데 사용 |
다음은 CSS3를 사용하여 요소를 2D로 변환하는 코드입니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 100px;
height: 100px;
background-color: rgb(255, 17, 0);
border:2px solid black;
margin: 20px;
display: inline-block;
color: white;
}
.rotate {
transform: rotate(20deg);
}
.translate {
transform: translate(30px, 20px);
}
.scale {
transform: scale(2, 1);
margin-left:70px;
}
.skew {
transform: skew(20deg);
}
</style>
</head>
<body>
<h1>2D transformation of elements </h1>
<div class="rotate">ROTATE</div>
<div class="skew">SKEW</div>
<div class="scale">SCALE</div>
<div class="translate">TRANSLATE</div>
</body>
</html> 출력
