HTML(or XML) & CSS & JavaScript
[XML] CSS에서 transform-origin 속성
YEJI ⍢
2022. 9. 15. 15:26
728x90
transform-origin 속성을 알기 전에 transform에 알고 싶다면 아래 링크로 들어가주세요 !
[XML] CSS에서 transform 속성
transform 속성이란 ? ? ? 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. transform 키워드에는 4 종류가 있습니다. 1. rotate 2. translate 3. scale 4. skew cd{transorm: rotate(2..
yyyeji.tistory.com
transform-origin 이란 ? ? ?
transform-origin은 CSS transform 속성과 함께 사용되는 속성으로서, 회전 중심(원점·기준점)을 지정합니다.
transform-origin의 속성 값은 ? ? ?
x, y를 백분율로 나타냅니다.
(대응 가능한 키워드가 있긴 합니다.)
0% - left
0% - top
50% - center
100% - right
100% - bottom
transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: 150% 0%;
transform: rotate(45deg);
transform-origin: -150% 0%;
transform: rotate(45deg);
transform-origin: 0% 350%;
transform: rotate(45deg);
transform-origin: 0% -350%;
◡̈