Html＆JQuery transform 속성 : scale(), rotate(), transform()
페이지 정보
작성자 디자인천일
작성일Date: 2025-03-31 00:58
조회view: 71
본문
transform 속성 : scale(), rotate(), transform()
transform-origin: 50%, 50%; //회전 기준점
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%
css
-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%);
transform-origin: 50%, 50%;