개발후라이
개발후라이
개발후라이
  • 분류 전체보기 (285)
    • Web Front End (74)
      • Javascript & Typescript (26)
      • React (11)
      • Vue (4)
      • Nodejs (1)
      • HTML (6)
      • CSS (7)
      • HTTP (6)
      • 책 - Review (8)
    • TIL (0)
    • Problem Solved (135)
      • 알고리즘 (4)
      • BOJ (67)
      • Programmers (8)
      • HackerRank (33)
      • LeetCode (23)
    • 회고 (4)
      • 오늘의 회고 (16)
      • 주간 회고 (15)
      • 월간 회고 (7)
      • WakaTime (9)
    • Git (3)
    • 기타 (15)
      • 취업 (5)
      • 자격증 (1)

블로그 메뉴

  • GitHub
  • LinkedIn
  • 홈

인기 글

태그

  • 릿코드
  • 회고
  • 프론트엔드
  • 개발자
  • 오늘의회고
  • TypeScript
  • 자바스크립트
  • 노마드북클럽
  • JavaScript
  • 노개북

최근 댓글

최근 글

전체 방문자
오늘
어제

티스토리

hELLO · Designed By 정상우.
개발후라이

개발후라이

Web Front End/CSS

[CSS] transform

2020. 2. 14. 14:09
반응형

transform이란?

  • 좌표공간을 변형함
  • 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿈

transform의 변형

  • 평면에서의 변형
  • 3D 공간에서의 회전, 확대, 이동, 기울이기
    • 회전: rotate()
    • 확대축소: scale()
    • 이동: translate(), translateX(), translateY()
    • 기울이기: skew()

예제

HTML

<div>Transformed element</div>

CSS

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

결과

Reference

  • https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
  • https://developer.mozilla.org/ko/docs/Web/CSS/transform
반응형
저작자표시 (새창열림)
    'Web Front End/CSS' 카테고리의 다른 글
    • [CSS] requestAnimationFrame vs transform/transition
    • [CSS] transition
    • [CSS] requestAnimationFrame
    • [CSS] VSync와 브라우저
    개발후라이
    개발후라이
    어제보다 오늘 발전하기 위한 공간 https://github.com/choisohyun

    티스토리툴바