transform, transition 그리고 벤더프리픽스란?

퍼블리싱/css

transform, transition 그리고 벤더프리픽스란?

xhakxh135 2023. 2. 27. 20:44

SMALL

transform -> css animate 중 하나이고 위치를 이동 시키거나 크기 조절 및 회전을 시킬 수 있는 기능을 가지고 있다.

scale(), rotate(), translate(), skew() 등

transform:scale() - X 또는 Y축으로 확대/ 축소

transform:scaleX(x축 비율);          // x축으로 확대, 축소
transform:scaleY(y축 비율);          // y축으로 확대, 축소
transform:scale(x축 비율, y축 비율);  // x축, y축으로 확대, 축소

transform:translate()

transform:translateX(10px);        // X축으로 10px 이동
transform:translateY(10px);        // Y축으로 10px 이동
transform:translate(-10px, -10px); // X축으로 -10px, Y축으로 -10px 이동

transform-origin

transform-origin 을 사용하면 지정 요소의 기준점을 변경 할 수 있다(위에 요소들은 모두 중심을 기준으로 동작한다)

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

이 곳에 접속하여 벤더 프리픽스 사용여부를 결정한다(웹 접근성을 위해 모두 사용 하는 것이 바람직 하겠다.)

벤더 프리픽스(공급사 접두어)

벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다

ex)

.aaa{
  display: -ms-grid;
  display: grid;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

translate

transform 속성에 사용할 수 있는 변형 함수 중 하나로 이동 효과를 담당한다

(translate(), translate3d(), translateX(), translateY(), translateZ() 존재)

transition

엘리먼트의 CSS 속성을 변경할 때 두 가지 상태 사이에 일어나는 변화(애니메이션)를 커스터마이징 할 때 사용한다

transition 속성은 transition-property, transition-duration, transition-timing-function, transition-delay등 이 있다.

LIST