티스토리 뷰

HTML+CSS

transform / transition속성 / day24 / 25.05.02

one-dy 2025. 5. 2. 15:46

3차원 속성 = 3d x, y, z축 

border-radius 100%로 만든 정원에 radial gradation주면 공처럼 보임. 

 

크기, 빛, 음영으로 입체효과 원근감을 주는 것.

 

2차원변형속성 : 색종이를 자른것과 같은 느낌

프로그램에서 화면의 좌표는 x축과 y축을 사용한다. x좌표와 y좌표가 있는 화면을 우리는 2차원 화면좌표라고 하고 여기에 z축을 추가하면 3차원 좌표가 된다. z축은 브라우저에서 사용자 쪽으로 가까워질수록 z축의 양수이며, 멀어질 수록 음수이다. 

 

2차원변환함수 

2차원변환함수는 2d상태로 x축과 y축을 이용한다. transform속성의 속성값으로 사용된다. 

 

[종류]

1. translate(X, Y) : 특정 크기만큼 이동한다.

-translateX : X축으로 특정 크기만큼 이동한다.

-translateY : Y축으로 특정 크기만큼 이동한다.

 

2. scale(X, Y)  : 특정 크기만큼 확대/축소한다. 이 때 값은 배율을 사용하기 때문에 단위는 없다.

1=100%와 같고, 1.2=120%가 된다.  박스의 중앙부분을 기준

ex) scale(1.5,1) 쓰고 width, height가 300이면 x축에서 1.5배 더 커져라 

-scaleX : X축으로 특정 크기만큼 확대/축소한다.

-scaleY : Y축으로 특정 크기만큼 확대/축소한다.

 

3. skew(angleX, angleY) : 특정 각도만큼 기울인다. 단위는 각도를 뜻하는 deg를 사용한다. skew는 2차원 변형밖에 없고, 3차원엔 존재하지 않는다. 임의의 값을 먼저 주고 개발자도구로 확인하면서 수정하는 게 좋다!

-skewX : X축으로 특정 각도만큼 기울인다.

-skewY : Y축으로 특정 각도만큼 기울인다.

 

4. rotate(angleZ) : Z축을 회전축으로 쓴다. 박스의 중앙부분을 기준으로 회전한다. 

<style>
      * {
        margin: 0;
        padding: 0;
      }
      section {
        width: 300px;
        height: 300px;
        border: 5px solid lightpink;
        margin: 100px;
      }
      div {
        width: 300px;
        height: 300px;
        background-color: rgb(196, 196, 33);
        transform: rotate(60deg);
      }

    <title>변형속성</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 300px;
        height: 300px;
        margin: 200px;
        text-align: center;
        line-height: 300px;
        font-size: 56px;
      }
      .box1 {
        background-color: darkorange;
        transform: translate(100px, -50px);
        /* x축으로 100px, y축으로 -50px위치로 보냄. */
        transform: translateX(-100px);
        /* 박스 중앙을 기준으로 음수방향 왼쪽으로 100px이동한 거임. */
        transform: translateY(-100px);
        /* 따로 주고싶으면 translateX또는 Y로 주고, 한번에 주고 싶으면 translate( , )써준다.
        똑같은 속성을 아래 또 써주면 위의 속성이 취소된다. */
      }
      .box2 {
        background-color: rgb(51, 194, 219);
        transform: scale(2, 1.2);
        /* transform사용하면 안의 글자까지 같이 늘어난다. 안에 있는 모든 자식태그들 같이 늘어난다. 웹사이트에서 마우스 호버했을 때 살짝 커지는 효과가 scale로 준 것. x축으로 2배, y축으로 1.2배 확대한다.  */
        transform: scaleX(0.5);
        /* 중앙을 기준, X축에서 0.5배 축소된다. */
        transform: scaleY(2);
        /* 중앙을 기준, Y축에서 2배 확대된다. */
      }
      .box3 {
        background-color: rgb(80, 175, 51);
        margin-top: 500px;
        transform: skew(45deg, 15deg);
        /* x축으로 45도, y축으로 15도 기울인다. 개발자도구에서 해주는게 보기 편하다. 각도가 있는 것들은 각도기가 나와서 각도기를 회전시키면서 값을 적용해주면 된다.  */
        border-radius: 100%;
        transform: skew(120deg, 1deg);
      }
      .box4 {
        background-color: rgb(212, 84, 212);
        color: #fff;
        /* z축으로 180도 회전시킴 */
        transform: rotate(180deg);
      }
    </style>
  </head>
  <body>
    <div class="transform_con">
      <div class="box1">translate</div>
      <div class="box2">scale</div>
      <div class="box3">skew</div>
      <div class="box4">rotate</div>
    </div>
  </body>
</html>

3차원 변형속성

z축까지 모두 이용하는 것을 말한다. 

x, y, z축을 이용하는 변형 속성, 입체효과같은 것을 만들 때 사용한다.

[종류]

1. translate3d(x,y,z) : 특정 크기만큼 이동한다.

-translateX  

-translateY 

-translateZ : z축으로 특정 크기만큼 이동한다.

 

2. scale3d(x,y,z) : 특정 크기만큼 확대/축소한다.

-scaleX

-scaleY

-scaleZ : Z축으로 특정 크기만큼 확대/축소한다.

 

3. rotate3d(angleX, angleY, angleZ, angle) : 특정 각도만큼 회전한다.

-rotateX 

-rotateY 

-rotateZ : Z축으로 특정 크기만큼의 방향성을 가진다.

 

transform-origin : 중심축 변경속성

transform이 적용된 요소는 박스의 가로세로 중심을 기준으로 변형된다.

이 때 중심축을 다른 위치로 옮기고 싶다면 transform-origin 속성을 사용한다. 

x축과 y축은 백분율(%), left, center, right, top, bottom 중에서 지정할 수 있고, z축은 길이값만 사용이 가능하다. 

 

[기본형]

transform-origin: x축 y축 z축;

 

transform-style

후손의 3차원 속성을 유지시키는 속성 

태그에 transform을 이용하여 3d 속성으로 변형을 주었을 때 모션 효과를 주게 되면

3d가 아니라 2d(평면)로 움직임이 발생한다.

이 때 후손 태그들에 적용된 3d 좌표를 유지하고 싶다면 사용하는 속성이다. 값은 preserve-3d값을 사용한다. 

    <title>3차원변형속성</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 300px;
        height: 300px;

        text-align: center;
        line-height: 300px;
        font-size: 35px;
      }
      .box1 {
        background-color: burlywood;
        transform: translate3d(150px, 100px, 999px);
        /* x축으로 150px, y축으로 100px, z축으로 1000px만큼 이동한다. */
        margin: 100px;
      }

      .box2 {
        background-color: rgb(60, 136, 187);
        transform: scale3d(1.5, 0.5, 6);
        /* x축으로 1.5배 확대, y축으로 0.5배 축소, z축으로 6배만큼 가까워진다. z축 거리값에 배수로 쓸 수 있고, ex: 6(배)
        px, %, vh등의 단위를 붙여줘도 된다. */
        margin: 100px;
      }

      .box3 {
        background-color: rgb(165, 101, 173);
        transform: rotate3d(2, 3, 4, 45deg);
        /* 방향성을 뜻해서 단위는 없다. x축으로 2만큼, y축으로 3만큼, z축으로 4만큼의 방향성을 가지고, 벡터로 45deg도 회전함. */
        margin: 100px;
      }
      section {
        width: 300px;
        height: 300px;
        margin: 200px;
        border: 10px solid red;
      }

      .box4 {
        background-color: rgb(19, 20, 20);
        color: white;
        transform: rotate(45deg);
        transform-origin: 100% 100%; /* 박스의 0점을 기준으로 넓이, 높이 값의 100% 위치 */
        transform-origin: left-center; /* 간편하게 키워드 쓰기, 왼쪽 중앙, 왼쪽 하단, 등등 px값을 써도 된다. */
      }
    </style>
  </head>
  <body>
    <div class="box1">translate3d</div>
    <div class="box2">scale3d</div>
    <div class="box3">rotate3d</div>
    <section>
      <div class="box4">origin</div>
    </section>
  </body>
</html>

정육면체 모션효과 주기 실습 

    <title>정육면체 모션효과 주기</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      section {
        width: 300px;
        height: 300px;
        position: relative;
        margin: 100px;
        /* 애니메이션 효과 rint:애니메이션 이름, 3s:3초 움직이겠다. linear:일정한 속도 0s:지연시간을주지 않겠다. infinite: 무한반복하겠다 라는 뜻 */
        animation: rint 5s linear 0s infinite;
        transform-style: preserve-3d;
        /* 자식박스의 3d 좌표를 유지해라. */
      }
      /* 애니메이션을 만드는 모듈, 애니메이션에서 정해놨던 이름 rint를 써줘야한다. */
      @keyframes rint {
        from {
          transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        }
        to {
          transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }
      }
      /* 부모가 평면이라서 안쪽에 입체효과를 주더라도 안 보이게 된다. 이때 preserve-3d값을 사용해야하는데 div 각각에 적용해선 안된다. 6개의 면이 각각 돌아가기 때문, 정육면체를 돌려야되기 때문에 section에 줘야한다. */
      div {
        width: 300px;
        height: 300px;
        position: absolute;
        /* 부모의 0점으로 6개 박스가 다 겹쳐짐 */
      }
      div:nth-child(1) {
        background-color: rgba(255, 0, 0, 0.3);
        transform: rotateY(0deg) translate3d(0px, 0px, 150px);
      }
      div:nth-child(2) {
        background-color: rgba(255, 165, 0, 0.3);
        transform: rotateY(90deg) translate3d(0px, 0px, 150px);
      }
      div:nth-child(3) {
        background-color: rgba(194, 212, 142, 0.3);
        transform: rotateY(180deg) translate3d(0px, 0px, 150px);
      }
      div:nth-child(4) {
        background-color: rgba(114, 136, 49, 0.3);
        transform: rotateY(180deg) translate3d(0px, 0px, 150px);
      }
      /* 박스 1이 뒤에 앞면, 2가 앞에 앞면 3,4가 양옆면 5,6이 윗면과 아랫면이 된다. */
      div:nth-child(5) {
        background-color: rgba(193, 233, 119, 0.219);
        transform: rotateY(90deg) translate3d(0px, 0px, 150px);
      }
      div:nth-child(6) {
        background-color: rgba(155, 33, 147, 0.13);
        transform: rotateY(270deg) translate3d(0px, 0px, 150px);
      }
    </style>
  </head>
  <body>
    <section>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </section>
  </body>
</html>

transition : 변환속성

태그에 모션효과를 만들어주는 속성으로 예를 들면 어떤 요소에 마우스를 올렸을 때 자연스럽게 변환하면서 모양이 바뀌도록 만드는 효과를 적용하고 싶을 때 사용한다.

사용자의 동작과 함께 쓰인다.

 

transition속성을 적용할 수 있는 다양한 css속성들 

1. 위치속성(좌표): top, left, right, bottom

2. 크기속성 : width, height

3. 박스속성 : margin, padding 

4. 테두리속성 : border-width, border-radius, border-color

5. 색상속성 : color, background-color 

6. 투명도속성 : opacity

7. 변형속성 : transform 

*한꺼번에 선언하고 싶으면 그냥 transtion

1. transition-duration : 몇 초동안 움직일지 지정한다. 

변환속성의 기본 속성 중 하나로 태그가 몇 초동안 변화할지를 지정한다.

단위는 시간을 뜻하는 s, ms단위를 사용하고 s는 '초'

ms단위는 밀리세컨즈단위로 1/1000초 를 뜻한다. 1000=1초인 단위이다.

예)2초=2000ms

 

2. transition-delay : 이벤트가 발생 후 몇 초 후에 재생할지를 지정한다. 

사용자가 키보드에 뭘 입력했다. 어디를 클릭했다. 마우스를 올렸다. 사용자가 브라우저 안에서 행하는 모든 행위를 말한다. 가령, 클릭한다던지 마우스를 태그 위에 올리는 행위/동작 등을 모두 이벤트라고 한다. 

키다운(키보드 누른것), 키업(키보드에서 손 뗀 것)이벤트

transition-delay는 이벤트가 발생한 후(hover) 몇 초를 기다리고 모션을 진행할지 정하는 속성이다.

마찬가지로 s, ms단위를 사용한다.

 

3. transition-property : 어떤 속성을 변환할지 지정한다. 

특정 속성만 변화시키고 싶거나 속성마다 다른 시간초(duration)를 적용하고 싶을 때 사용한다.

transition-property의 속성값은 속성명을 사용하고, 만약 각각 다르게 시간을 지정하고 싶은 경우 속성명과 시간을 함께 선언할 수 있다.

 

4. transition-timing-function : 수치변형함수

모션효과의 속도를 지정하는 속성. 가속도와 같다. 쓸 수 있는 속성값은 5개

 

[속성값]

linear : 처음부터 끝까지 일정한 속도로 움직인다.

ease : 기본값. 처음에는 천천히 시작했다가 천천히 빨라지며 마지막에는 천천히 멈추는 속도값.

ease-in : 처음을 천천히 움직인다.

ease-out : 마지막에 천천히 끝낸다.

ease-in-out : 느리게 시작하고 느리게 끝난다. 

'HTML+CSS' 카테고리의 다른 글

mediaquery / day26 / 25.05.08  (0) 2025.05.09
position / 좌표 / z-index속성 / day23 / 25.05.01  (0) 2025.05.02
flex속성 / day22 / 25.04.29  (0) 2025.05.02
<form>,<input>태그 공통속성 / day20 / 25.04.28  (1) 2025.04.28
✔입력양식태그들 / day19 / 25.04.25  (3) 2025.04.25