여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. CSS - Transforms
CSS – Transforms
2년전 작성
2년전 수정

CSS의 transforms 속성을 이용하면 요소의 모양과 위치를 변경할 수 있다.

Transforms

transforms 속성 사용하는 방법에 대해 알아보자.

transform-origin

상위 요소에서 선택한 요소의 위치를 지정한다. 기본값 = 상위 요소의 중앙.

transform

선택한 요소에서 변환할 속성값을 입력한다.
여러 속성을 변환하려면 오른쪽 » 왼쪽 순서로 입력한다.

3차원 좌표계를 참고하여 변환축을 결정한다.

rotate()

회전 시키는 속성이다.

기본 예시
transform-image
 

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()

기울기를 설정하는 속성이다.

기본 예시
transform-image
 

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축);

이런식으로 입력한다.

기본 예시
참고

Mingg`s Diary
밍구
공부 목적 블로그