- transform을 사용하려면 해당 요소의 display속성이 block 또는inline-block이어야 함
- translate(x,y) : 지정한 크기만큼 x축, y축으로 이동
translateX(x) : 지정한 크기만큼 x축으로 이동
translateY(y) : 지정한 크기만큼 y축으로 이동
- scale(x,y) : 지정한 크기만큼 x축과 y축으로 확대/축소한다
scaleX(x) : 지정한 크기만큼 x축으로 확대/축소한다
scaleY(y) : 지정한 크기만큼 y축으로 확대/축소한다
- rotate(각도) : 지정한 각도만큼 회전(+시계방향, -반시계방향)
rotateX(각도) : X축을 기준으로 회전, 입체감 있게 표현하려면 perspective 속성을 부모 요소에 적용
rotateY(각도) : Y축을 기준으로 회전, 입체감 있게 표현하려면 perspective 속성을 부모 요소에 적용
rotateZ(각도) : Z축을 기준으로 회전, 입체감 있게 표현하려면 perspective 속성을 부모 요소에 적용
- skew(x,y) : 지정한 각도만큼 x축과 y축으로 왜곡
skewX(x) : 지정한 각도만큼 x축으로 왜곡
skewY(y) : 지정한 각도만큼 y축으로 왜곡
<!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: 0;
padding: 0;
background-color: lightgrey;
}
.outline,
.box {
width: 60px;
height: 60px;
}
.outline {
border: 3px solid deepskyblue;
margin: 0 auto;
margin-top: 20px;
}
.box {
background-color: lightblue;
}
.box1 {
transform: translate(20px, 30px);
}
.box2 {
transform: scale(2, 0.5);
}
.box3 {
transform: rotate(45deg);
}
.outline-box3 {
perspective: 50px;
}
.box4 {
transform: skew(15deg, 20deg);
}
</style>
</head>
<body>
<div class="outline">
<div class="box box1"></div>
</div>
<div class="outline">
<div class="box box2"></div>
</div>
<div class="outline">
<div class="box box3"></div>
</div>
<div class="outline">
<div class="box box4"></div>
</div>
</body>
</html>
