transform 속성 : scale(), rotate(), transform() > 공책

본문 바로가기
010.6356.7610
  • design1001@naver.com
  • @design1001
작업물 전체보기

Html+CSS

Html+CSS transform 속성 : scale(), rotate(), transform()

페이지 정보

  • 작성자후야
  • 조회 : 808
  • 작성일 : 2021-01-28 00:33

본문

transform:scale()

transform:scaleX(scale); //가로로 확대, 축소

transform:scaleY(scale); //세로로 확대, 축소

transform:scale(Xscale, Yscale); //가로, 세로로 확대, 축소


transform:rotate(angle)

transform:rotateX(angle); //가로방향으로 각도만큼 회전

transform:rotateY(angle); //세로방향으로 각도만큼 회전

transform:rotate(angle); //그냥 회전


transform:translate()

transform:translateX(-50%); //가로 방향으로 -50%

transform:translateY(-50%); //세로 방향으로 -50%

transform:translate(-50%, -50%); //가로, 세로 방향으로 -50%

-webkit-transform:scale(2, 2);
-moz-transform:scale(2, 2);
-ms-transform:scale(2, 2);
-o-transform:scale(2, 2);
transform:scale(2, 2);

-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);

-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
-ms-transform:translate(0,-50%);
-o-transform:translate(0,-50%);
transform:translate(0,-50%);

-webkit-transform:translate(-50%,0);
-moz-transform:translate(-50%,0);
-ms-transform:translate(-50%,0);
-o-transform:translate(-50%,0);
transform:translate(-50%,0);

-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);