Transformation
transformation : 요소를 말 그대로 변형시킨다.
transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여 할 수 있다.
img태그에 적용해보자.
<style>
img {
border: 2px solid black;
border-radius: 50%;
/* transform: rotateY(50deg); */
}
</style>
</head>
<body>
<img src="nomadcoders.png" />
먼저 이미지를 업로드하고 border를 준 뒤는
주석을 풀고 trasnform y축 각을 줘보자
따라~ 변했다.. y축을 기준으로 각이 줄었다 ㅎㅎ 90deg를 주면 수직이니까 1자가 된서 안보인다...
transform: rotateY(50deg) rotateX(50deg) rotateZ(10deg);
x,y,z축 변형이 가능하다.
scale(x, y) : x, y축으로 scale값이 주어지면 사이즈가 변경된다
translate: 위치를 이동한다
transformation은 box 요소, 이미지를 변형시키지 않고 margin, padding이 적용되지 않는다
일종의 3D transformation 개념. 픽셀 자체를 변형시킴.
또 여러가지를 한번에 적용 할 수있다.
states에도 적용됨
*반복 : transition은 state에 적용하지 않고 root 요소에 적용한다.
developer.mozilla.org/ko/docs/Web/CSS/transform
transform - CSS: Cascading Style Sheets | MDN
transform CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다. The source for this interactive example is stored
developer.mozilla.org
참고하자 property가 많다.