Transform
- 요소의 모양세를 변경하기위해 사용한다.
- 기본값 :
none
- 속성구조
[x] : 단일 값 적용
- 사용가능한 속성값
[x_...] : 띄우기로 구분하여 여러값 적용
- 속성값
rotateX(a) : x축에 대해 a만큼 회전한다.rotateY(a) : y축에 대해 a만큼 회전한다.rotateZ(a) : z축에 대해 a만큼 회전한다.scale(a) : (2차원의 상황에서) 요소를 a 만큼 확대/축소한다. 값은 0 이상의 실수이며, 1 일때 본래의 크기를 가진다.translate(x, y) : x축에 대해 x만큼, y축에 y만큼 이동한다. 해당 값이 퍼센트 값일경우 해당요소 크기를 기준으로 하는데 x값에 대해 가로크기, y값에 대해 세로 크기에 대한 비율로 적용한다.(브라우저 한가운데로 이동시에 사용된다.)translateX(a) : X축에 대해 a만큼 이동한다. 해당 값이 퍼센트 값일 경우 요소의 가로 길이에 대비한다.translateY(a) : Y축에 대해 a만큼 이동한다. 해당 값이 퍼센트 값일 경우 요소의 세로 길이에 대비한다.translateZ(a) : Z축에 대해 a만큼 이동한다.
transform-origin
transform이 발생하는 기준점을 지정한다.- 기본값 :
center
- 속성구조
[x] : 기준점을 x로 한다.[x] [y] : 기준점을 x, y 로 한다.
- 속성값
centertoprightbottomleft
transform- style
- 자식 요소의 배치 방식에 대한 설정이다.
- 기본값:
flat
- 속성값
flat : 자식요소가 해당(부모) 요소의 평면상에 존재해야함을 의미한다.preserve-3d : 자식요소가 3D 공간상에 존재해야함을 의미한다.
perspective
- 한 개 이상의 3D와 관련된 자식요소를 가지는 해당(부모) 요소에 대한 원근 거리를 지정하기 위해 사용한다.
- 기본값 :
none
- 속성값
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
height: 100vh;
perspective: 10rem;
transform-style: preserve-3d;
}
.box {
top: 50%;
left: 50%;
width: 10rem;
height: 10rem;
background-color: dodgerblue;
position: absolute;
transform: rotateY(0deg) translate(-50%, -50%);
transform-origin: left top;
transition-duration: 500ms;
}
body:hover .box{
transform: rotateY(45deg) translate(-50%, -50%);
}
.box:hover{
transform: scale(2) rotate(10000turn) translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>