CSS의 transforms 속성을 이용하면 요소의 모양과 위치를 변경할 수 있다.
Transforms
transforms 속성 사용하는 방법에 대해 알아보자.
transform-origin
상위 요소에서 선택한 요소의 위치를 지정한다. 기본값 = 상위 요소의 중앙.
transform
선택한 요소에서 변환할 속성값을 입력한다.
여러 속성을 변환하려면 오른쪽 » 왼쪽 순서로 입력한다.
3차원 좌표계를 참고하여 변환축을 결정한다.
rotate()
회전 시키는 속성이다.
기본 예시
CSS
div.transforms {
transform: rotate(90deg);
transform-origin: bottom left;
}
HTML
<div class="transforms"><img src="이미지 URL">><div>
사용된 코드 설명
rotate(90deg);
:
시계 방향으로 90도 회전시킨다.
transform-origin: bottom left;
:
왼쪽 아래 모서리를 기준점으로 변환시킨다.
skewx()
기울기를 설정하는 속성이다.
기본 예시
CSS
div.transforms img{
transform: skewx(10deg) translatex(100px);
transform-origin: bottom left;
}
HTML
<div class="transforms"><img src="이미지 URL">><div>
사용된 코드 설명
transform: skewx(10deg);
:
기울기 각도를 10도로 설정한다. skewx(10deg, -10deg)와 같이 사용할 수도있다.
translatex(100px);
:
x축 기준으로 100px 이동한다.
perspective
원근감을 설정하는 속성이다.
기본 예시
CSS
.pers250 {
perspective: 250px;
}
.pers350 {
perspective: 350px;
}
.pers500 {
perspective: 500px;
}
.pers650 {
perspective: 650px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 200px;
height: 200px;
margin: 75px 0 0 75px;
border: none;
}
.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(50px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
/* Make the table a little nicer */
th, p, td {
background-color: #EEEEEE;
padding: 10px;
font-family: sans-serif;
text-align: left;
}
HTML
perspective: 250px;
|
perspective: 350px;
|
|---|---|
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
perspective: 500px;
|
perspective: 650px;
|
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
사용된 코드 설명
perspective: 250px;
:
원근감을 250px 정도로 설정한다. 숫자가 커질수록 원근감이 더 느껴진다.
backface-visibility: visible;
:
요소의 뒷쪽에서 앞면이 보이게 한다. 기본 값 = visible.
perspective-origin: 150% 150%;
:
요소를 뒤로 눞히고 오른쪽으로 기울인다. 기본 값 = center = 50% 50%.
transform-style: preserve-3d;
:
선택한 요소의 자식 요소가 3D로 배치되어야 한다.
transform: translateZ(50px);
:
z축 기준으로 50px 이동한다.
transform: rotateY(-90deg);
:
y축 기준으로 시계 반대방향으로 회전한다.
transform: rotateX(90deg);
:
x축 기준으로 시계방향으로 회전한다.
translate3d()
3D 공간에서 요소의 위치를 변경한다.
CSS
translate3d(x축, y축, z축);
이런식으로 입력한다.
기본 예시
참고
MDN Web Docs - Using CSS transforms
MDN Web Docs - transform-style
MDN Web Docs - translate3d()
공부 목적 블로그