Home
CSS
애니메이션

transform 이동 효과 주는 방법 - translate

transform의 translate로 요소를 이동할 수 있습니다. 평면(2D)에서의 이동입니다.
2 min read

transform / translate

  • transform의 translate로 요소를 이동할 수 있습니다.
  • 평면(2D)에서의 이동입니다.

 

기본형

transform : translate ( value );
  • value에 값을 입력합니다.
  • 단위는 px, %, em 등을 사용합니다.

 

예제

  • 평면에서 이동이기 때문에 translateZ 속성은 움직이지 않는 것처럼 보입니다. perspective 속성으로 원근감을 주면 움직이는 과정을 볼 수 있습니다.

 

같이 보면 좋은 글

 

기타 CSS 참조

애니메이션으로 돌아가기

You may like these posts

  • 구글 블로그 CSS 스타일 기초 문법
    HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다는 아이디어가 바로 웹 표준의 시작입니다. 이렇게 내용과 디자인이 구분되어 있기 때문에 사이트의 내용을 수정해야할 때도 디자인에 전혀 영향을 미치지 않고 내용만 수정할 수 있습니다. 또한 반대로 내용은 건드리지 않은 상태에서 스…
  • 클래스 상태에 따라 스타일 지정 - 가상 클래스
    사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들거나 웹 요소의 상태에 따라 스타일을 지정할 때 가상 클래스 선택자를 사용합니다. 목차 사용자 동작에 반응하는 가상 클래스 다음 가상 클래스 선택자들은 가상 클래스 선택자 중 자주 사…
  • 속성 값이 적용이 되지 않을 때 - !important
    !important CSS는 같은 속성을 여러 번 정의했을 때,나중에 설정한 값이 우선 순위로 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 !important를 속성값 뒤에 붙입니다.   기본형 selector { property: value !important; …
  • 배경 이미지 투명하게 만드는 방법
    배경의 투명도 배경만 투명하게 하려면 RGBA 색상을 이용하여 정합니다. 간단한 예제는 다음과 같습니다. div { padding: 40px; background-image: url( "//bit.ly/3l02sot" ); } p { font-family: "Arial Black", sans-se…
  • 요소 상태에 따라 스타일 지정 - 가상 요소
    선택자로도 지정하기 어려운 대상이 있습니다. 예를 들어 몇 번째 항목이라든가 문단의 첫 번째 글자 등의 경우 어떻게 지정해야 할까요? 이럴 때 가상 요소와 가상 클래스를 사용합니다. 가상 요소는 내용의 일부만 선택해 스타일을 적용할 때 사용합니다. 목차 가상 요소 가상 요소(Ps…
  • CSS를 HTML에 적용시키는 방법
    웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많습니다. 이런 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓은 것을 '스타일 시트' 라고 합니다. 스타일 시트는 문서 안에서 사용할 스타일 규칙들을 정의한 '내부 스타일 시트'와 별도의 스타일 파일을 만들어 문…

Post a Comment