[CSS] Transform(변환) 마스터하기

◾ transform (이미지만 가능)

→ transition 으로 조절이 가능하다 ! 

 

→ rotateX,Y,Z(??deg);      // deg: 각도

  transform: rotateX(120deg);

 

→ scaleX,Y,Z(?);

transform: scale(2,2);

 

→ translate X,Y,Z(-1000px);     // 지정하지 않은 텍스트는 이동하지 않음  // 사진을 좀 이동시키고 싶을 때

  transform: translateX(350px);

 

→ 같이 사용 가능

transform: rotateZ(300deg) scale(2);

 

 

img {
  color: black;
  background-color: red;
  text-decoration: none;
  padding: 5px 10px;
  height: 500px;
  border: 10px solid black;
  border-radius: 50%;
  transition: transform 5s ease-in-out;
}

img:hover {
  transform: rotate(80deg);
}