기초) transform 1 (rotate / scale) 정리

 

 

 

 

{ transform : ( ); }

 

 

 

피사체를 원하는 각도로 비틀거나

hover+transition으로

애니메이션 연출을 할 수 있는 기능.

 

 

 

 

---

 

 

 

값

 

 

 

 

 

1. rotate

 

 

 

 

 

 

1️⃣: rotate ( deg);

 

전체 회전

 

 

 

<style>
body { padding:100px; background: pink;}

div  { 
       width:200px; height: 200px; border: 1px solid red;
       background: red;
       transform: rotate(45deg);
       transition: all 0.5s;
     }
div:hover {transform: rotate(380deg);}

</style>


<div></div>

 

 

 

 

 

 

---

 

 

 

2️⃣: rotateX ( deg);

 

상하 축으로 회전

 

 

 

<style>
body { padding:100px; background: pink;}
div  { width:200px; height: 200px; border: 1px solid red;
       background: red;
       transform: rotate(deg);
       transition: all 0.5s;
}
div:hover {transform: rotateX(90deg);}

</style>

 

 

 

 

 

 

---

 

 

 

 

3️⃣: rotateY ( deg);

 

좌우 축으로 회전

 

 

 

<style>
body { padding:100px; background: pink;}
div  { width:200px; height: 200px; border: 1px solid red;
       background: red;
       transform: rotate(deg);
       transition: all 0.5s;
}
div:hover {transform: rotateY(90deg);}

</style>

 

 

 

 

 

 

---

 

 

 

2. scale

 

 

 

1️⃣: scale (1);

 

전체 사이즈 조정 가능

(1은 피사체의 사이즈가

100%인 것을 의미)

 

 

 

.sample { width:200px; height: 200px; border: 1px solid red;
          background: rgba(255,0,0,0.7);
          transform: scale(1);
          transition: all 0.5s, background;
}
.sample:hover {transform: scale(0.5); background: red;}

</style>
<div class="sample"></div>

 

 

 

 

 

 

 

---

 

 

 

2️⃣: scaleX (1);

 

좌우 길이 조절 가능

 

 

.sample { width:200px; height: 200px; border: 1px solid red;
          background: rgba(255,0,0,0.7);
          transform: scale(1);
          transition: all 0.5s, background;
}
.sample:hover {transform: scaleX(1.5); background: red;}

 

 

 

 

 

 

---

 

 

 

 

3️⃣: scaleY (1);

 

상하 길이 조절 가능

 

 

 

.sample { width:200px; height: 200px; border: 1px solid red;
          background: rgba(255,0,0,0.7);
          transform: scale(1);
          transition: all 0.5s, background;
}
.sample:hover {transform: scaleY(1.5); background: red;}

 

 

 

 

 

 

---