Enjoy Programming

Transformation 본문

CSS

Transformation

LEETAEEON 2021. 3. 25. 15:55

transformation : 요소를 말 그대로 변형시킨다.

transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여 할 수 있다.

 

img태그에 적용해보자.

<style>

      img {

        border: 2px solid black;

        border-radius: 50%;

        /* transform: rotateY(50deg); */

      }

    </style>

  </head>

  <body>

    <img src="nomadcoders.png" />

먼저 이미지를 업로드하고 border를 준 뒤는

transform 전

주석을 풀고 trasnform y축 각을 줘보자

transform 후

따라~ 변했다.. 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가 많다.

'CSS' 카테고리의 다른 글

Media queries  (0) 2021.03.25
Animations @keyframes  (0) 2021.03.25
Transitions  (0) 2021.03.25
css에서 전역변수  (0) 2021.03.25
:: selector (pseudo selectors)  (0) 2021.03.25
'CSS' Related Articles more