기초) transform 2 (skew / translate) 정리

 

 

 

 

 

3. skew

 

 

 

 

 

1️⃣: skew (deg, deg);

 

피사체를 잡아당겨 왜곡을 주는 기능

각각 X축 값과 Y축 값을 넣을 수 있고

별도로도 줄 수 있다.

 

 

2️⃣: skewX (deg); X축

 

3️⃣: skewY (deg); Y축

 

 

 

.sample2 {width: 200px; height: 200px; border: 1px solid red;
          background: purple;
          transition: all 0.5s;
          transform: skew(0deg), background;
          }
.sample2:hover {transform:skew(20deg, 20deg); background: gray;}


.sample2:hover {transform:skewX(20deg); background: gray;}

.sample2:hover {transform:skewY(20deg); background: gray;}

 

 

 

 

 

 

 

 

 

---

 

 

 

4. translate

 

 

 

 

 

1️⃣: translate (20%, 30px);

 

 

피사체를 특정 위치로 이동시키는 기능

 

값을 %로 주면 박스 사이즈에 비례하여

이동 위치를 환산한다.

(ex. 박스 크기가 100px이고

이동 값이 20% 면 100px에 대한 20%를 이동)

 

각각 X축 값과 Y축 값을 넣을 수 있고

별도로도 줄 수 있다.

 

 

 

 

2️⃣: translateX (30px);

 

3️⃣: translateY (20%);

 

 

.sample3: { width: 200px; height:200px; border: 1px solid red;
          background: gray;
          transition: all 0.5s;
          transform: translate(), background;
          }
.sample3:hover { transform: translate(20%, 50px); background: gray;}

.sample3:hover { transform: translateX(20%); background: gray;}

.sample3:hover { transform: translateY(50px); background: gray;}

 

 

 

 

 

 

 

 

---

 

 

 

 

*팁팁팁

 

translate을 이용한

정 중앙 위치시키는 법

 

 

 

 

박스를 브라우저 가운데에

정렬 시키고자 할 때 보통

position속성을 사용했었다.

 

포지션에absolute 값을주고

left/top을 각각 50%씩,

 

그리고는margin의 특성을

활용하여 박스의 총 사이즈

(기본 값 + 보더 값)을 계산,

 

알아낸 총 사이즈의 절반값을 빼

다시 코드로 넣어 주었던 것.

 

 

 

예를 보자

 

.sample4 { width: 200px; height: 200px; border: 1px solid red;
           position: absolute; left: 50%; top: 50%;
           margin: -101px 0 0 -101px;}

 

복잡복잡

 

 

 

위처럼 사용해도 괜찮지만

문제는 박스 사이즈가 달라지는 경우

계산을 새로 하여 값을 새로이

넣어주어야 하는 번거로움이 있으니

 

유지 보수 측면에서 결코 좋지 않은

방법이었다고 할 수 있다.

 

 

그래서 앞으로는 tranlate을 쓴다.

 

 

 

---

 

 

 

먼저 코드를 보자.

 

 

.sample4 { width: 200px; height: 200px; border: 1px solid red;
          position: absolute; left: 50%; top: 50%;
          transform: translate(-50%, -50%);
        }

 

 

 

박스 사이즈의 절반을 %로

자동 계산하여 빼 주기 때문에

혹 박스 사이즈를 변경해야 해도

따로 계산할 필요가 없다.