transform 속성
1. transform
- 요소에 변환 효과를 적용
- none (default) : 요소에 변환 효과를 적용하지 않음
- rotate() : 지정한 각도만큼 요소를 회전
- scale() : 지정한 크기만큼 요소를 확대 또는 축소
- translate() : 지정한 크기만큼 요소를 이동
- skew() : 지정한 각도만큼 요소를 기울임
- matrix() : matrix 함수를 이용해 변환
- perspective() : 요소의 원근감을 설정
2. transform-orgin
- 변환 중심을 설정
| transform-orgin : x-axis y-axis z-axis |
- length : 크기 단위를 사용해 설정
- percentage (deault : 50% 50% 0) : 요소 크기의 백분율로 설정
- top : 변환 중심을 요소의 위쪽 끝으로 설정
- right : 변환 중심을 요소의 오른쪽 끝으로 설정
- bottom : 변환 중심을 요소의 아래쪽 끝으로 설정
- left : 변환 중심을 요소의 왼쪽 끝으로 설정
- center : 변환 중심을 요소의 가운데로 설정
3. transform-style
- 후손 요소의 3차원 변환 효과를 유지하면서 요소를 변환하도록 설정
- flat (default) : 후손 요소의 3차원 변환 효과를 무시
- preserve-3d : 후손 요소의 3차원 변환 효과를 유지
4. backface-visibility
- 3차원 변환 효과를 적용했을 때 평면의 뒷면을 보이도록 또는 보이지 않도록 설정
- visible (default) : 3차원 변환 효과를 적용했을 때 평면의 뒷면을 보이도록 설정
- hidden : 3차원 변환 효과를 적용했을 때 평면의 뒷면을 보이지 않도록 설정
5. perspective
- 자식 요소에 3차원 효과가 적용됐을 때 원근감을 설정
- none (default) : 원근감을 설정하지 않음
- length : 크기 단위를 사용해 3차원 변환 효과가 적용된 자식 요소가 얼마나 멀리 떨어진 곳에 보이는 지 설정
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0">
<meta charset="utf-8">
<title>transform</title>
<link rel="stylesheet" href="reset.css">
<style>
#container {
width: 400px;
height: 400px;
margin: 30px auto;
background-color: thistle;
border: 3px solid #555;
box-sizing: border-box;
position: relative;
}
#box1 {
width: 200px;
height: 200px;
border: 3px solid #555;
background-color: pink;
box-sizing: border-box;
text-align: center;
line-height: 200px;
font-size: 30px;
font-weight: 900;
color: #555;
position: absolute;
top: 50%; left: 50%; /* %의 기준 : 기준이 되는 영역의 크기 */
}
</style>
</head>
<body>
<div id="container">
<div id="box1">Center</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0">
<meta charset="utf-8">
<title>transform</title>
<link rel="stylesheet" href="reset.css">
<style>
#container {
width: 400px;
height: 400px;
margin: 30px auto;
background-color: thistle;
border: 3px solid #555;
box-sizing: border-box;
position: relative;
}
#box1 {
width: 200px;
height: 200px;
border: 3px solid #555;
background-color: pink;
box-sizing: border-box;
text-align: center;
line-height: 200px;
font-size: 30px;
font-weight: 900;
color: #555;
position: absolute;
top: 50%; left: 50%; /* %의 기준 : 기준이 되는 영역의 크기 */
}
#box2 {
width: 200px;
height: 200px;
border: 3px solid #555;
background-color: rgba(235, 164, 208, 0.7);
box-sizing: border-box;
text-align: center;
line-height: 200px;
font-size: 30px;
font-weight: 900;
color: #555;
position: absolute;
top: 50%; left: 50%; /* %의 기준 : 기준이 되는 영역의 크기 */
transform: translate(-50%, -50%);
/* %의 기준 : 요소의 크기 */
}
</style>
</head>
<body>
<div id="container">
<div id="box1">Center 1</div>
<div id="box2">Center 2</div>
</div>
</body>
</html>
