CSS 변환 효과 (요소의 변환 효과)

transform: 변환함수1 변환함수2 변환함수3 .... ;

transform: 원근법 이동 크기 회전 기울임;

 

2D 변환 함수

• translate(x,y): 이동(x축, y축)
• translateX(x): 이동(x축)
• translateY(y): 이동(y축)
• scale(x,y): 크기(x축, y축)
• scaleX(x): 크기(x축)
• scaleY(y): 크기(y축)
• rotate(degree): 회전(각도) ex) 45deg
• skew(x,y): 기울임(x축, y축)
• skewX(x): 기울임(x축)
• skewY(y): 기울임(y축)
• matrix(n,n,n,n,n,n): 2차원 변환 효과

<div class="container">
  <div class="item">AB</div>
</div>

body {
  padding: 100px;
}
div {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  transition: 
    1s .5s;
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform: rotate(45deg) 
    scale(1.3);
}

결과

 

3D 변환 함수

• translateZ(z): 이동(z축)
• translate3d(x,y,z): 이동(x축, y축, z축)
• scaleZ(z): 크기(z축)
• scale3d(x, y, z): 크기 (x축, y축, z축)
• perspective(n): 원근법(거리)
• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n): 3차원 변환 효과
• rotateX(x): 회전(x축)
• rotateY(y): 회전(y축)
• rotateX(z): 회전(z축)
• rotate3d(x,y,z,a): 회전(x축, y축, z축, 각도)

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform: translate(40px, 40px);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform: translateX(40px);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform: translateY(40px);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:scale(0.7);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:rotate(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:rotateX(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:rotateY(45deg);
}

 

원근법 함수(perspective)는 제일 앞에 작성해야 한다

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:perspective(500px) rotateX(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:perspective(500px) rotateY(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:perspective(500px) rotateX(45deg) rotateY(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:skewX(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:skewX(-45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:skewY(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:perspective(300px) rotateX(45deg)
    translateX(100px);
}

 

perspective: 하위 요소를 관찰하는 원근 거리를 지정

단위: px 등 단위로 지정

 

perspective 함수와 차이점

perspective 속성: 적용대상이 관찰대상의 부모이다, 기준점 설정: perspective-origin, perspective: 600px

perspective 함수: 적용대상이 관찰대상이다, 기준점 설정: transform-origin, transform: perspective(600px)

 

 

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:perspective(500px) rotateY(45deg);
}

div {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  perspective: 500px;
  transition: 
    1s .5s;
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  
  transform:rotateY(45deg);
}

 

backface-visibility: 3D 변환으로 회전된 요소의 뒷면 숨김 여부

visible: 뒷면 보임(기본값)

hidden: 뒷면 숨김

 

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  font-size: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform:rotateY(180deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  font-size: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform:rotateY(180deg);
  backface-visibility: hidden;
}