CSS) 변환 2D 속성 transform: translate(30px, 30px)

1) transform

position을 사용하게되면 부하가 걸리게된다. transform와 같이 애니매이션에 특화된 속성을 사용해야 한다.

 

사용법

1. position을 이용한 애니메이션 효과(잘못된 사용방법)

html

<div class="box">123</div>

css

.box {
  width: 200px;
  height: 200px;
  background: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transition: 1s;
  position: relative;
  left: 0;
  top: 0;
}
.box:hover {
  position: relative;
  left: 100px;
  top: 30px;
}

※ rendering이 다시 되기 때문에 부하가 걸리게된다.

 

2. transform을 이용한 애니메이션 효과(올바른 사용방법)
위치이동 tranform: translate(30px, 30px)

html

<div class="box">123</div>

css

.box {
  width: 200px;
  height: 200px;
  background: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transition: 1s;
}
.box:hover {
  transform: translate(30px, 30px)
}

※ transform을 이용해서 애니메이션을 사용하면 많은 효과를 가지더라도 문제가 발생하지 않는다. 최적화되어 있다.

 

3. transform을 이용한 애니메이션 효과(올바른 사용방법)
위치이동 tranform: scale(1.5);

html

<div class="box">123</div>

css

.box {
  width: 200px;
  height: 200px;
  background: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transition: 1s;
  margin: 100px;
}
.box:hover {
    transform: scale(1.5);
}

 

 

4. transform을 이용한 애니메이션 효과(올바른 사용방법)
비트는 효과 transform: skew(10deg, 5deg);

html

<div class="box">123</div>

css

.box {
  width: 200px;
  height: 200px;
  background: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transition: 1s;
  margin: 100px;
}
.box:hover {
  transform: skew(10deg, 5deg);
/*   transform: skewX(20deg);
  transform: skewY(-20deg); */
}

 

5. transform을 이용한 애니메이션 효과(올바른 사용방법)
위치이동+비트는 효과 transform: translate(20px, 10px) skewX(20deg);

html

<div class="box">123</div>

css

.box {
  width: 200px;
  height: 200px;
  background: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transition: 1s;
  margin: 100px;
}
.box:hover {
  transform: translate(20px, 10px) skewX(20deg);
}

※ 여러가지 애니메이션 효과를 동시에 사용도 가능하다. 띄어쓰기로 구분할 수 있다.