변환 2D 속성

1. position VS translate

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  display: flex;
  justify-content: center;
  font-size: 30px;
  position: relative;
  left: 100px;
  top: 30px;
}

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  display: flex;
  justify-content: center;
  font-size: 30px;
  transform: translate(100px, 30px);
}

위의 코드와 밑에 코드는 같은 값이 출력이 된다. 

하지만 차이가 있다.

만약 원하는 위치에 배치시키고 끝내고 싶다면 position을 이용하는것이 좋다.

만약 요소의 위치가 실시간으로 변해야 된다면 translate를 이용하는것이 좋다.

 

 

 

실시간으로 배치되는 요소의 선언방법(transition과 함께!)

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  display: flex;
  justify-content: center;
  font-size: 30px;
  transition: 1s;
}

.box:hover{
  transform: translate(30px, 30px);
}

 

 

 

2. scale

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  display: flex;
  justify-content: center;
  font-size: 30px;
  transition: 1s;
  margin: 100px;
}

.box:hover{
  transform: scale(1.5);
}

위의 소스코드는 1.5배가 커진다는 뜻이다.

 

 

 

3. skew

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  display: flex;
  justify-content: center;
  font-size: 30px;
  transition: 1s;
  margin: 100px;
}

.box:hover{
  transform: skewX(45deg);
}

비틀수 있게 해준다.

 

 

 

4. 한꺼번에 사용하기 (translate & skew)

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  display: flex;
  justify-content: center;
  font-size: 30px;
  transition: 1s;
  margin: 100px;
}

.box:hover{
  transform: translate(20px, 10px) skewX(45deg);
}