[HTML5 & CSS3] 변형

▶ 변형

특정 요소의 크기나 형태가 변하는 것. CSS3를 이용하면 스타일 시트 소스만으로 간단히 이미지를 변형할 수 있다.

*2차원 변형과 3차원 변형

'2차원 변형'은 웹 요소를 변형시킬 때 단순히 수평이나 수직으로 이동하고 회전하는 것을 말한다.

'3차원 변형'은 x축과 y축에 원근감을 주는 z축을 추가해 변형시키는 것을 말한다.

*transform과 변형 함수

이미지를 회전시키거나 이동하는 등 웹 요소를 변형하려면 transform 속성을 사용해야 하는데 transform: 다음에 변형 함수를 함께 입력해 사용한다.

예를 들어 .photo라는 클래스 선택자를 가진 웹 요소를 x축으로 50px, y축으로 100px 이동시키려면 웹 요소를 이동시키는 변형 함수 translate을 사용해 다음과 같이 스타일을 지정한다.

.photo { transform: translate(50px, 100px); }

-2차원 변형 함수

변형 함수	설명
translate(tx, ty)	지정한 크기만큼 x축과 y축으로 이동한다.
translateX(tx)	지정한 크기만큼 x축으로 이동한다.
translateY(ty)	지정한 크기만큼 y축으로 이동한다.
scale(sx, sy)	지정한 크기만큼 x축과 y축으로 확대/축소한다.
scaleX(sx)	지정한 크기만큼 x축으로 확대/축소한다.
scaleY(sy)	지정한 크기만큼 y축으로 확대/축소한다.
rotate(각도)	지정한 각도만큼 회전한다.
skew(ax, ay)	지정한 각도만큼 x축과 y축으로 왜곡한다.
skewX(ax)	지정한 각도만큼 x축으로 왜곡한다.
skewY(ay)	지정한 각도만큼 y축으로 왜곡한다.

-3차원 변형 함수

변형 함수	설명
matrix3d(n, [n])	4x4 행렬을 이용해 이동과 확대/축소, 회전 등의 변환을 지정한다.
translate3d(tx, ty, tz)	지정한 크기만큼 x축과 y축, z축으로 이동한다.
translateZ(tz)	지정한 크기만큼 z축으로 이동한다.
scale3d(sx, sy, sz)	지정한 크기만큼 x축과 y축, z축으로 확대/축소한다.
scaleZ(sz)	지정한 크기만큼 z축으로 확대/축소한다.
rotate3d(rx, ry, rz, 각도)	지정한 각도만큼 회전한다.
rotateX(각도)	지정한 각도만큼 x축으로 회전한다.
rotateY(각도)	지정한 각도만큼 y축으로 회전한다.
rotateZ(각도)	지정한 각도만큼 z축으로 회전한다.
perspective(길이)	입체적으로 보일 수 있는 깊이 값을 지정한다.

*translate 변형 함수 - 요소 이동시키기

translate 변형 함수는 2차원과 3차원에서 모두 가능한 변형 함수이다. x축 방향이나 y축 방향 또는 양쪽 방향으로 이동할 거리를 지정해 해당 요소를 지정한 크기만큼 이동시킨다.

기본형)

transform:translate(tx, ty)

transform:translate3d(tx, ty, tx)

transform:translateX(tx)

transform:translateY(ty)

transform:translateZ(tz)

<style>
   .movex:hover {
      -webkit-transform: translateX(50px);
      -ms-transform: translateX(50px);
      -moz-transform: translateX(50px);
      -o-transform: translateX(50px);
      transform: translateX(50px);
   }
   .movey:hover {
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      -moz-transform: translateY(20px);
      -o-transform: translateY(20px);
      transform: translateY(20px);
   }
   .movexy:hover {
      -webkit-transform: translate(10px, 20px);
      -ms-transform: translate(10px, 20px);
      -moz-transform: translate(10px, 20px);
      -o-transform: translate(10px, 20px);
      transform: translate(10px, 20px);
   }
</style>

<body>
<div class="origin">
<div class="movex"><img src="images/bus.jpg"></div>
</div>
<div class="origin">
<div class="movey"><img src="images/bus.jpg"></div>
</div>
<div class="origin">
<div class="movexy"><img src="images/bus.jpg"></div>
</div>
</body>

*scale 변형 함수 - 요소 확대/축소하기

scale 변형 함수는 지정한 크기만큼 확대/축소한다. 사용하는 함수는 scale(sx, sy)와 scaleX(sx), scaleY(sy), scale3d(sx, sy, sz), scaleZ(sz)인데 괄호 안의 값이 1보다 크면 확대되고 1보다 작으면 축소된다.

기본형)

transform:scale(sx, sy)

transform:scale3d(sx, sy, sx)

transform:scaleX(sx)

transform:scaleY(sy)

transform:scaleZ(sz)

<style>
   .scalex:hover {
      -webkit-transform: scaleX(1.2);
      -ms-transform: scaleX(1.2);
      -moz-transform: scaleX(1.2);
      -o-transform: scaleX(1.2);
      transform: scaleX(1.2);
   }
   .scaley:hover {
      -webkit-transform: scaleY(1.5);
      -ms-transform: scaleY(1.5);
      -moz-transform: scaleY(1.5);
      -o-transform: scaleY(1.5);
      transform: scaleY(1.5);
   }
   .scale:hover {
      -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
      -moz-transform: scale(0.7);
      -o-transform: scale(0.7);
      transform: scale(0.7);
   }
</style>
</head>

<body>
<div class="origin">
<div class="scalex"><img src="images/fruit.jpg"></div>
</div>
<div class="origin">
<div class="scaley"><img src="images/fruit.jpg"></div>
</div>
<div class="origin">
<div class="scale"><img src="images/fruit.jpg"></div>
</div>
</body>

*rotate 변형 함수 - 요소 회전하기

2차원과 3차원 변형 모두 가능한 rotate 변형 함수는 지정한 각도만큼 웹 요소를 시계 방향이나 시계 반대 방향으로 회전시킨다. rotate 변형 함수는 2차원 함수일 때와 3차원 함수일 때의 기본형이 다르다.

-2차원 함수 기본형

기본형)

transform:rotate(각도)

-3차원 함수 기본형

기본형)

transform:rotate(rx, ry, 각도)

transform:rotate3d(rx, ry, rx, 각도)

transform:rotateX(rx)

transform:rotateY(ry)

transform:rotateZ(rz)

<style>
   .rotate1:hover {
      -webkit-transform: rotate(20deg);
      -ms-transform: rotate(20deg);
      -moz-transform: rotate(20deg);
      -o-transform: rotate(20deg);
      transform: rotate(20deg);
   }
   .rotate2:hover {
      -webkit-transform: rotate(-40deg);
      -ms-transform: rotate(-40deg);
      -moz-transform: rotate(-40deg);
      -o-transform: rotate(-40deg);
      transform: rotate(-40deg);
   }
</style>

<body>
<div class="origin">
<div class="rotate1"><img src="images/fruit.jpg"></div>
</div>
<div class="origin">
<div class="rotate2"><img src="images/fruit.jpg"></div>
</div>
</body>

<style>
   .origin {
      perspective: 200px; /* 3차원에서 입체적인 느낌을 주기 위해 화면에 깊이감을 줌 */
   }
   .rotatex {
      -webkit-transform: rotateX(45deg);
      -moz-transform: rotateX(45deg);
      -o-transform: rotateX(45deg);
      -ms-transform: rotateX(45deg);
      transform: rotateX(45deg);
   }
   .rotatey {
      -webkit-transform: rotateY(45deg);
      -moz-transform: rotateY(45deg);
      -o-transform: rotateY(45deg);
      -ms-transform: rotateY(45deg);
      transform: rotateY(45deg);
   }
   .rotatez {
      -webkit-transform: rotateZ(45deg);
      -moz-transform: rotateZ(45deg);
      -o-transform: rotateZ(45deg);
      -ms-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
   }
   .rotatexyz {
      -webkit-transform: rotate3d(2.5, 1.2, -1.5, 45deg);
      -moz-transform: rotate3d(2.5, 1.2, -1.5, 45deg);
      -o-transform: rotate3d(2.5, 1.2, -1.5, 45deg);
      -ms-transform: rotate3d(2.5, 1.2, -1.5, 45deg);
      transform: rotate3d(2.5, 1.2, -1.5, 45deg);
   }
</style>

<body>
<div class="origin">
<div class="rotatex"><img src="images/fruit.jpg" alt=""></div>
</div>
<div class="origin">
<div class="rotatey"><img src="images/fruit.jpg" alt=""></div>
</div>
<div class="origin">
<div class="rotatez"><img src="images/fruit.jpg" alt=""></div>
</div>
<div class="origin">
<div class="rotatexyz"><img src="images/fruit.jpg" alt=""></div>
</div>
</body>

*skew 변형 함수 - 요소를 비틀어 왜곡하기

2차원 변형만 가능한 skew 변형 함수는 요소를 지정한 각도만큼 비틀어 왜곡한다. 이때 양쪽 방향이나 한쪽 방향으로만 비틀 수 있다.

기본형)

transform:skew(ax, ay)

transform:skewX(ax)

transform:skewY(ay)

<style>
   .skewx:hover {
      -webkit-transform: skewX(30deg);
      -ms-transform: skewX(30deg);
      -moz-transform: skewX(30deg);
      -o-transform: skewX(30deg);
      transform: skewX(30deg);
   }
   .skewy:hover {
      -webkit-transform: skewY(15deg);
      -ms-transform: skewY(15deg);
      -moz-transform: skewY(15deg);
      -o-transform: skewY(15deg);
      transform: skewY(15deg);
   }
   .skewxy:hover {
      -webkit-transform: skew(-25deg, -15deg);
      -ms-transform: skew(-25deg, -15deg);
      -moz-transform: skew(-25deg, -15deg);
      -o-transform: skew(-25deg, -15deg);
      transform: skew(-25deg, -15deg);
   }
</style>
</head>

<body>
<div class="origin">
<div class="skewx"><img src="images/rose.jpg"></div>
</div>
<div class="origin">
<div class="skewy"><img src="images/rose.jpg"></div>
</div>
<div class="origin">
<div class="skewxy"><img src="images/rose.jpg"></div>
</div>
</body>

저작자표시

'HTML5 & CSS3' 카테고리의 다른 글

[HTML5 & CSS3] 트랜지션 (0)	2021.02.14
[HTML5 & CSS3] 변형과 관련된 속성들 (0)	2021.02.14
[HTML5 & CSS3] 가상 클래스와 가상 요소 (0)	2021.02.14
[HTML5 & CSS3] 속성 선택자 (0)	2021.02.14
[HTML5 & CSS3] 연결 선택자 (0)	2021.02.14

🐠붕어의 코딩 공부 기록🐠

[HTML5 & CSS3] 변형

▶ 변형

'HTML5 & CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML5 & CSS3] 변형

▶ 변형

'HTML5 & CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바