개발 공부 기록하기

DAY 26. 변형(transform) 본문

프밍/CSS

DAY 26. 변형(transform)

태영(泰伶) 2022. 12. 14. 22:55

나에게는 오지 않을 것만 같았던 코로나에 1주일을 꼬박 앓느라 코딩 공부고 뭐고 다 뒷전이었다....ㅂㄷㅂㄷ...

처음에 목 간질거리기만 하고 아주 약~간 미열만 있을 때는

그저 "아싸! 격리 때문에 일 쉬는 김에 코딩 공부 더 해야지!!"했지만.. 하핳....

아무리 3년간 변이를 거치며 약해졌대도 코로나는 코로나였다.. 약하긴 🐶뿔.. 목아파 ㄷㅈ는줄 알았다...ㅠㅠㅠ

 

아무튼, 각설하고,

오랜만에 돌아와 공부를 다시 시작해 본다.

 

이전까지는 CSS로 html 파일에 시각적인 효과를 줬다면,

오늘 하는 부분부터는 CSS로 할 수 있는 '애니메이션 동작'을 할 수 있는 기능이다.

 

읭? 애니메이션, 동적 기능 이런 건 Javascript 아니야?

라고 묻는다면,

결론은 CSS로도 일부 할 수 있다. 가 답이다.

(아니 사실 나도 그렇게 물었다..ㅎ 난 아직 초짜니까ㅠㅠ)

 

어어어어어어....??

근데 왜 가볍게 넘겨다본 책에서 '함수'라는 글자가 보인다냐....??

그래 맞다... 이런 거 떠올렸다...ㅠㅠㅠㅠㅠㅠㅠㅠㅠ

중고등학교 시절 나를 으마무시 괴롭혔던 네놈!!!

(어릴 적 딸내미 공부시키려는 아빠의 그 멘트가 잊히지 않는다....

아빠 - "딱 보면 안 나오냐?!"

나 - "안 나와아.. 안 나온다고요 어헝헝ㅠㅠㅠㅠ"

그래서 맨날 울음보였다지...)

 

에이... 초보한테 뭐 어려운 함수 시키겠어...??

일단 도오전!!!!!!

 

 

transform

변형시키다, (모습을) 완전히 바꿔놓다.

 

 

CSS 변형을 이용하면 사용자의 동작에 반응해서 텍스트나 이미지 등을 움직이게 만들 수 있다!

 

기본형은

{ transform: 함수;

}

이다.

함수 부분에는 변형 함수의 이름이 들어가고, 보통 그 이름 옆으로 괄호가 붙는다.

 

그렇게, 2차원적으로도, 3차원적으로도 변형할 수 있다.

으앜ㅋㅋ 공간 벡터 때문에 힘들었던 고딩 때가 생각난다.....@ㅁ@;;

 

2차원 변형 함수 모음

종류 설명
transform: translate(tx, ty); 지정한 크기만큼 x축, y축으로 이동.
보통 2개 값을 다 쓰지만, ty값을 쓰지 않으면 0으로 간주함.
transform: translateX(tx); 지정한 크기만큼 x축으로 이동
transform: translateY(ty); 지정한 크기만큼 y축으로 이동
 
transform: scale(sx, sy); 지정한 크기만큼 x축과 y축으로 확대·축소
transform: scaleX(sx); 지정한 크기만큼 x축을 기준으로 확대·축소
transform: scaleY(sy); 지정한 크기만큼 y축을 기준으 확대·축소
 
transform: rotate(각도); 지정한 각도만큼 회전
 
transform: skew(ax, ay); 지정한 각도만큼 x축과 y축으로 왜곡
transform: skewX(ax); 지정한 각도만큼 x축을 기준으로 왜곡
transform: skewY(ay); 지정한 각도만큼 y축을 기준으로 왜곡

 

 

3차원 변형 함수 모음

종류 설명
transform: translate3d(tx, ty, tz); 지정한 크기만큼 x축, y축, z축으로 이동.
z축이 앞뒤 방향이다.
transform: translateZ(tz); 지정한 크기만큼 z축으로 이동
 
transform: scale3d(sx, sy, sz); 지정한 크기만큼 x축과 y축, z축으로 확대·축소
transform: scaleZ(sz); 지정한 크기만큼 z축으로 확대·축소
 
transform: rotate(rx, ry, 각도); 지정한 각도만큼 회전
transform: rotate3d(rx, ry, rz, 각도); 지정한 각도만큼 회전
transform: rotateX(각도); 지정한 각도만큼 x축을 기준으로 회전
transform: rotateY(각도); 지정한 각도만큼 y축을 기준으로 회전
transform: rotateZ(각도); 지정한 각도만큼 z축을 기준으로 회전
 
transform: perspective(길이); 입체적으로 보일 수 있도록 깊잇값 지정

 

 

 

translate() 함수

예제 1.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>transform: translate();</title>
         <style>
            #container {
               width: 800px;
               height: 200px;
               margin: 20px auto;
            }
            .origin {
               width: 100px;
               height: 100px;
               border: 1px solid black;
               float: left;
               margin: 40px;
            }
            .origin > div {
               width: 100px;
               height: 100px;
               background-color: orange;
            }
            #movex:hover {
               transform: translateX(50px);		/* x축으로(가로) 50px 이동 */
            }
            #movey:hover {
               transform: translateY(20px);		/* y축으로(세로) 20px */
            }
            #movexy:hover {
               transform: translate(10px, 20px);	/* x축으로(가로) 10px, y축으로(세로) 20px 이동 */
            }
         </style>
      </head>
      <body>
         <div id="container">
            <div class="origin">
               <div id="movex"></div>
            </div>
            <div class="origin">
               <div id="movey"></div>
            </div>
            <div class="origin">
               <div id="movexy"></div>
            </div>
         </div>
      </body>
   </html>

↓

위의 이미지에 마우스를 가져다 대면
이렇게 보인다.

 

 

 

scale() 함수

괄호 안의 값 > 1 → 확대

괄호 안의 값 < 1 → 축소

 

예제 2.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>transform: scale();</title>
         <style>
            #container {
               width: 600px;
               margin: 20px auto;
            }
            .origin {
               width: 100px;
               height: 100px;
               border: 1px solid black;
               float: left;
               margin: 40px;
            }
            .origin > div {
               width: 100px;
               height: 100px;
               background-color: orange;
            }
            #scalex:hover {
               transform: scaleX(2);		/* x축으로(가로) 2배 확대 */
            }
            #scaley:hover {
               transform: scaleY(1.5);		/* y축으로(세로) 1.5배 확대 */
            }
            #scale:hover {
               transform: scale(0.7);		/* x축(가로), y축(세로)으로 0.7배 확대 = 70% 사이즈로 축소 */
            }
         </style>
      </head>
      <body>
         <div id="container">
            <div class="origin">
               <div id="scalex"></div>
            </div>
            <div class="origin">
               <div id="scaley"></div>
            </div>
            <div class="origin">
               <div id="scale"></div>
            </div>
         </div>
      </body>
   </html>

↓

위의 이미지에 마우스를 가져다 대면
이렇게 보인다.

 

 

 

rotate() 함수

요소를 회전시키는 데 쓰이며, 2차원적으로 회전시킬 수도 있고, 3차원적으로 회전시킬 수도 있다.

 

2차원 rotate() 함수

2차원적으로 요소를 회전시킬 때는 괄호 안에 각도만 적으면 된다.

각도를 작성할 때 단위는 보통 deg(우리가 보통 알고 있는 ˚를 쓰는 60분법) 또는 *라디언radian을 사용한다.

*radian: 호도(弧度)라고도 부름. 옛날 옛적 삼각함수를 배울 때 초반에 이 단위를 배운 적이 있다고 한다...(자신 ×)

내 뇌야 기억해 내란 말이야..!!! 10년밖에(?) 안 됐다고!!!

반지름 길이(r) = 호의 길이일 때의 각도를 1라디언이라고 한다. 이번 참에 또 찾아봄...ㅎㅎㅎ....

원의 둘레 2πr : 원 전체의 각도 360˚ = (원 둘레의 일부인) 호의 길이 r : 중심각 1rad

위의 비례식을 정리하면

1rad × 2πr = 360˚ × r

1rad = (360˚ × r) / 2πr

1rad = 180˚/π = 57.295779513082320876798154814105.....

그렇대...ㅎㅎ

 

 

예제 3.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>transform: rotate2d();</title>
         <style>
            #container {
               width: 800px;
               margin: 20px auto;
            }
            .origin {
               width: 100px;
               height: 100px;
               float: left;
               margin: 40px;
            }
            #rotate1:hover {
               transform: rotate(40deg);		/* 시계 방향(오른쪽)으로 40도 회전 */
            }
            #rotate2:hover {
               transform: rotate(-40deg);		/* 시계 반대 방향(왼쪽)으로 40도 회전 */
            }
            #rotate3:hover {
               transform: rotate(2rad);		/* 시계 방향(오른쪽)으로 2radian 회전 */
            }
         </style>
      </head>
      <body>
         <div id="container">
            <div class="origin" id="rotate1">
               <img src="images/tree.jpg">
            </div>
            <div class="origin" id="rotate2">
               <img src="images/tree.jpg">
            </div>
            <div class="origin" id="rotate3">
               <img src="images/tree.jpg">
            </div>
         </div>
      </body>
   </html>

↓

위의 이미지에 마우스를 가져다 대면
이렇게 보인다.

책에서 제공해준 예제 파일에는 라디언 단위를 다룬 것이 없길래 내가 맘대로 추가했다...ㅎ

 

 

 

3차원 rotate() 함수

3차원적으로 요소를 회전하기 위해서는 괄호 안에 x축, y축, z축, 각도를 적어주어야 한다.

여기에 더해서 원근감까지 원한다면 perspective 속성을 별도로 더 써 준다.

(perspective 속성값 > 0이어야 하고, 원근감을 나타내고 싶은 그 요소가 아니라 그의 부모 요소에 써 주어야 한다.)

 

예제 4.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>transform: rotate3d();</title>
         <style>
            .origin {
               width: 152px;
               height: 180px;
               border: 1px solid black;
               margin: 30px;
               float: left;
            }
            .origin > div {
               width: 152px;
               height: 180px;
            }
            .rotatex:hover {
               transform: rotateX(50deg);/* x축으로 50도 회전 */
            }
            #pers {
               perspective: 300px;/* 원근감 추가 */
            }
         </style>
      </head>
      <body>
         <h4>원본 이미지</h4>
         <div>
            <img src="images/sunset.jpg">
         </div>
         <div class="origin">
            <div class="rotatex">
               <img src="images/sunset.jpg">
            </div>
            <div class="origin" id="pers">
               <div class="rotatex">
                  <img src="images/sunset.jpg">
               </div>
            </div>
         </div>
      </body>
   </html>

↓

위의 이미지에 마우스를 가져다 대면
이렇게 된다.

 

 

 

 

예제 5.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>transform: rotate3d();</title>
         <style>
           #container {
            width: 800px;
            margin: 20px auto;
           }
           .origin {
            width: 100px;
            height: 100px;
            margin: 40px;
            float: left;
            border: 1px solid black;
            perspective: 200px;		/* 원근감 추가 */
           }
           .origin > div {
            width: 100px;
            height: 100px;
            background-color: orange;
            transition: all 3s;			/* 3초 동안 회전하도록 트랜지션 적용 */
           }
           #rotatex:hover {
            transform: rotateX(55deg);		/* x축을 기준으로 55도 회전 */
           }
           #rotatey:hover {
            transform: rotateY(55deg);		/* y축을 기준으로 55도 회전 */
           }
           #rotatez:hover {
            transform: rotateZ(55deg);		/* z축을 기준으로 55도 회전 */
           }
           #rotatexyz:hover {
            transform: rotate3d(2.5, 1.2, -1.5, 55deg);		/* x축, y축, z축에 방향 벡터를 지정하고 55도 회전 */
           }
         </style>
      </head>
      <body>
         <div id="container">
            <div class="origin">
               <div id="rotatex"></div>
            </div>
            <div class="origin">
               <div id="rotatey"></div>
            </div>
            <div class="origin">
               <div id="rotatez"></div>
            </div>
            <div class="origin">
               <div id="rotatexyz"></div>
            </div>
         </div>
      </body>
   </html>

↓

핸드폰으로 찍었더니 화질 별로다..ㅡㅡ;;;

 

 

 

skew() 함수

skew: 왜곡하다, 비스듬히 움직이다

 

지정한 각도만큼 요소를 비틀어 왜곡할 때 쓴다.

 

예제 6.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>transform: skew();</title>
         <style>
           #container {
            width: 600px;
            margin: 20px auto;
           }
           .origin {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            float: left;
            margin: 40px;
           }
           .origin > div {
            width: 100px;
            height: 100px;
            background-color: orange;
            transition: all 3s;		/* 3초 동안 비틀리도록 트랜지션 적용 */
           }
           #skewx:hover {
            transform: skewX(30deg);		/* x축을 기준으로 30도 비틀기 */
           }
           #skewy:hover {
            transform: skewY(15deg);		/* y축을 기준으로 15도 비틀기 */
           }
           #skewxy:hover {
            transform: skew(-25deg, -15deg);		/* x축을 기준으로 -25도, y축을 기준으로 -15도 비틀기 */
           }
         </style>
      </head>
      <body>
         <div id="container">
            <div class="origin">
               <div id="skewx"></div>
            </div>
            <div class="origin">
               <div id="skewy"></div>
            </div>
            <div class="origin">
               <div id="skewxy"></div>
            </div>
         </div>
      </body>
   </html>

↓

 

일부러 천천히 바뀌는 것 보려고 바로 앞 예제에 적혀있던 (아직 공부하지 않은) 트랜지션을 한 줄 더 넣었다.

skewX

각도 > 0: 오른쪽 윗부분이 아래로 내려감.

각도 < 0: 왼쪽 윗부분이 아래로 내려감.

 

skewY

각도 > 0: 오른쪽 윗부분이 아래로 내려감.

각도 < 0: 왼쪽 윗부분이 아래로 내려감.

 

 

예제 7.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>transform: skew();</title>
         <style>
           #container {
            width: 600px;
            margin: 20px auto;
           }
           h1 {
            width: 500px;
            height: 80px;
            background-color: #222;
            color: #fff;
            font-weight: bold;
            line-height: 80px;
            text-align: center;
            transform: skewX(15deg);		/* x축을 기준으로 15도 비틀기 */
           }
         </style>
      </head>
      <body>
         <div id="container">
            <h1>CSS 변형 함수 익히기</h1>
         </div>
      </body>
   </html>

↓

 

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

DAY 27. 트랜지션(transition)  (1) 2022.12.25
Section 7. CSS 선택자의 세계(1)  (0) 2022.12.21
Section 6. CSS 기초(2)  (1) 2022.12.12
Section 6. CSS 기초(1)  (0) 2022.12.04
DAY 25. 단원 마무리 문제 풀기  (0) 2022.12.03
'프밍/CSS' Related Articles more
Comments