반응형
CSS Transformation 속성은 HTML 요소의 디자인을 변경하는 데 사용되는 CSS 속성 입니다.
다음은 각 속성에 대한 간단한 설명입니다.
- transform: 요소의 변형(transformation)을 지정합니다. 이 속성을 사용하면 translate, rotate, skew, scale 등의 속성을 하나의 속성으로 통합할 수 있습니다.
- translate: 요소의 위치를 x, y 축으로 이동시킬 수 있습니다.
- rotate: 요소를 특정 각도만큼 회전시킬 수 있습니다.
- skew: 요소를 x, y 축으로 빗겨 변형시킬 수 있습니다.
- scale: 요소의 크기를 x, y 축으로 확대 또는 축소시킬 수 있습니다.
CSS Transformation 속성은 웹 페이지의 디자인과 사용자 상호작용을 더욱 높이는 데 도움이 될 수 있습니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transform: translate(50px, 50px) rotate(45deg) skew(20deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>위 예제에서 .box 선택자에 CSS Transformation 속성을 지정하였습니다.
translate 속성으로 x축 50px, y축 50px 이동시켰고, rotate 속성으로 45도 회전시켰습니다. skew 속성으로 x, y축 20도 빗겨 변형시켰습니다.
이 코드를 실행하면, 빨간 상자가 지정한 위치로 이동하고, 회전하고, 빗겨 변형된 결과를 볼 수 있습니다.
반응형