CSS3 transform 사용법 (matrix 포함)

CSS3의 2D 및 3D 변형 효과를 표현할 수 있는 Transform 매소드에 대한 내용입니다. 포토샵에서도 transform 메뉴가 있는데, 이미지를 기울일수도 있고 회전시킬수도 있습니다. 특정 부위를 휠 수도 있고 3D효과처럼 기울어진 효과도 가능합니다. 먼저 transform의 스타일 요소를 살펴보도록 하겠습니다.

scale - 크기를 변형함

skew - 기울어짐을 변형함

rotate - 회전을 줌

translate - 위치를 이동함

perspective - 3D효과를 위한 원근감을 부여함 (부모요소에 적용시킴)

matrix - perspective를 제외한 모든 요소들을 한번에 일괄 적용시킴

대략 이 정도가 됩니다. 그리고 아래의 이미지를 한번 봐주시기 바랍니다.

3D를 구성하는 가장 기본 축 입니다. HTML5 CSS3 같은 웹코딩에서는 저 빨간색이 우리가 바라보는 시야가 됩니다. 즉 회색의 사각형이 화면의 브라우저 화면이라고 생각하시면 됩니다. 기본적으로 이렇게 축을 이해해주시면 되고, X축 Y축 값의 +값은 각 오른쪽과 아래 이며, -값은 그 반대인 왼쪽과 위쪽 입니다. 예를 들자면 이것입니다.

① transform: translate (50px 50px);

② transform: translateX (100px);

③ transform: translateY (-100px);

④ transform: translateZ (-100px);

먼저 1번의 경우는 왼쪽으로 50픽셀, 아래쪽으로 50픽셀을 이동시킨다는 뜻이 됩니다. 2번은 X축에 대해서만 100px을 주었으니, 오른쪽으로만 입력한 값만큼 이동하게 됩니다. 3번은 Y축에 대한 이동입니다. 마지막 4번의 경우는 위의 좌표대로라고 한다면 우리가 바라보는 화면상으로 말씀드리자면 전체적으로 작아지는 것 처럼 보여지게 될 것입니다. 왜냐하만 Z축에 대한 -값이기 때문입니다. 만약 -가 아닌 일반 +값을 입력하게 된다면 마치 확대되는 것 처럼 보이게 됩니다. 그러나 4번의 경우는 깊이에 대한 이동 부분이기 때문에 별도로 부모 요소에 perspective 라고 하는 요소를 입력해야 합니다. 값이 작을수록 입체감이 커집니다. 그러면 아래의 예시를 먼저 살펴보겠습니다.

See the Pen Transform by rgy0409 (@rgy0409) on CodePen.

마우스를 하나하나 올려보시고, 어떤 요소들로 구성되었는지 살펴보시기 바랍니다. 자세한 마크업 상태를 한 눈에 살펴보기 위해서 아래에 한번 더 코딩 상태를 작성하도록 하겠습니다. 먼저 HTML 상태 입니다.

<div>

</a>

<p>rotate(45deg)</p>

</div>

<div>

</a>

<p>rotate(-45deg)</p>

</div>

<div>

</a>

<p>rotateX(90deg)</p>

</div>

<div>

</a>

<p>rotateY(90deg)</p>

</div>

<div>

</a>

<p>rotateZ(90deg)</p>

</div>

<div>

</a>

<p>scale(1.5, 1.5)</p>

</div>

<div>

</a>

<p>scale(0.5, 0.5)</p>

</div>

<div>

</a>

<p>scale(-1, -1)</p>

</div>

<div>

</a>

<p>scale(2, 1)</p>

</div>

<div>

</a>

</div>

<div>

</a>

</div>

<div>

</a>

<p>skewX(45deg)</p>

</div>

<div>

</a>

<p>skewY(45deg)</p>

</div>

<div>

</a>

<p>translate(45px,45px)</p>

</div>

<div>

</a>

<p>translateX(45px)</p>

</div>

<div>

</a>

<p>translateY(45px)</p>

</div>

<div>

</a>

<p>perspective(100px) rotateX(45deg)</p>

</div>

<div>

</a>

<p>perspective(100px) rotateY(45deg)</p>

</div>

<div>

</a>

<p>perspective(80px) rotateX(-90deg)</p>

</div>

<div>

</a>

<p>perspective(80px) rotateY(-90deg)</p>

</div>

<div>

</a>

<p>matrix(1,0,0,1,0,0)<br><span>default (No Change)</span></p>

</div>

<div>

</a>

<p>matrix(1,1,0,1,0,0)</p>

</div>

<div>

</a>

<p>matrix(1,0,1,1,0,0)</p>

</div>

<div>

</a>

<p>matrix(1,0,0,1,50,0)</p>

</div>

<div>

</a>

<p>matrix(1,0,0,1,0,50)</p>

</div>

<div>

</a>

<p>matrix(0.5,0,0,0.5,0,0)</p>

</div>

<div>

</a>

<p>matrix<br>(2,1,-1,1.5,30,-45)</p>

</div>

<div>

</a>

<p>translateZ(-50px)</p>

</div>

다음은 CSS 상태 입니다.

/*RESET*/

* {

margin: 0;

padding: 0;

}

li {

list-style: none;

}

/*BODY*/

body {

font: 17px 'Nanum Gothic', sans-serif;

}

body>div {

float: left;

width: 200px;

height: 200px;

margin: 20px;

text-align: center;

background: #fff;

box-shadow: 5px 5px 15px 1px #777;

}

a {

display: block;

width: 100px;

height: 100px;

margin: 30px auto 0;

font-size: 20px;

font-weight: bold;

line-height: 100px;

color: black;

text-decoration: none;

background: #eee;

}

a.perspective {

perspective: 100px;

}

a.perspective2 {

perspective: 80px;

}

a>div {

width: 100px;

height: 100px;

background: skyblue;

opacity: 0.5;

transition: all 0.5s;

}

p {

padding-top: 20px;

font-size: 17px;

}

span {

color: red;

}

a:hover .cov1 {

transform: rotate(45deg);

-webkit-transform: rotate(45deg);

}

a:hover .cov2 {

transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

}

a:hover .cov3 {

transform: rotateX(90deg);

-webkit-transform: rotateX(90deg);

}

a:hover .cov4 {

transform: rotateY(90deg);

-webkit-transform: rotateY(90deg);

}

a:hover .cov5 {

transform: rotateZ(90deg);

-webkit-transform: rotateZ(90deg);

}

a:hover .cov6 {

transform: scale(1.5, 1.5);

-webkit-transform: scale(1.5, 1.5);

}

a:hover .cov7 {

transform: scale(0.5, 0.5);

-webkit-transform: scale(0.5, 0.5);

}

a:hover .cov8 {

transform: scale(-1, -1);

-webkit-transform: scale(-1, -1);

}

a:hover .cov9 {

transform: scale(2, 1);

-webkit-transform: scale(2, 1);

}

a:hover .cov10 {

transform: skew(45deg, 45deg);

-webkit-transform: skew(45deg, 45deg);

}

a:hover .cov11 {

transform: skew(-45deg, -45deg);

-webkit-transform: skew(-45deg, -45deg);

}

a:hover .cov12 {

transform: skewX(45deg);

-webkit-transform: skewX(45deg);

}

a:hover .cov13 {

transform: skewY(45deg);

-webkit-transform: skewY(45deg);

}

a:hover .cov14 {

transform: translate(45px,45px);

-webkit-transform: translate(45px,45px);

}

a:hover .cov15 {

transform: translateX(45px);

-webkit-transform: translateX(45px);

}

a:hover .cov16 {

transform: translateY(45px);

-webkit-transform: translateY(45px);

}

a:hover .cov17 {

transform: rotateX(45deg);

-webkit-transform: rotateX(45deg);

}

a:hover .cov18 {

transform: rotateY(45deg);

-webkit-transform: rotateY(45deg);

}

a:hover .cov19 {

transform: rotateX(-90deg);

-webkit-transform: rotateX(-90deg);

}

a:hover .cov20 {

transform: rotateY(-90deg);

-webkit-transform: rotateY(-90deg);

}

a:hover .cov21 {

transform: matrix(1,0,0,1,0,0);

-webkit-transform: matrix(1,0,0,1,0,0);

}

a:hover .cov22 {

transform: matrix(1,1,0,1,0,0);

-webkit-transform: matrix(1,1,0,1,0,0);

}

a:hover .cov23 {

transform: matrix(1,0,1,1,0,0);

-webkit-transform: matrix(1,0,1,1,0,0);

}

a:hover .cov24 {

transform: matrix(1,0,0,1,50,0);

-webkit-transform: matrix(1,0,0,1,50,0);

}

a:hover .cov25 {

transform: matrix(1,0,0,1,0,50);

-webkit-transform: matrix(1,0,0,1,0,50);

}

a:hover .cov26 {

transform: matrix(0.5,0,0,0.5,0,0);

-webkit-transform: matrix(0.5,0,0,0.5,0,0);

}

a:hover .cov27 {

transform: matrix(2,1,-1,1.5,30,-45);

-webkit-transform: matrix(2,1,-1,1.5,30,-45);

}

a:hover .cov28 {

transform: translateZ(50px);

-webkit-transform: translateZ(50px);

}

파란색의 불투명 div는 각각 다른 transform 요소를 적용시켜야 하기 때문에 공통된 부분을 제외하고 별도로 클래스값을 부여하여 transform 속성만 따로 지정했습니다. 현재 파란색 불투명의 div의 부모 요소는 a 태그 입니다. 이 a태그를 잘 살펴보시면 별도로 클래스값을 부여한 perspective, perspective2에 각각 입체감을 만들기 위해서 따로 스타일을 추가 지정한것을 알 수 있습니다. 예를 들어 이 부분은 이렇게 설명을 드릴 수 있겠습니다.

<div>

</a>

<p>perspective(100px) rotateY(45deg)</p>

</div>

a.perspective {

perspective: 100px;

}

a:hover .cov18 {

transform: rotateY(45deg);

-webkit-transform: rotateY(45deg);

}

a요소에 별도로 perspective라고 클래스를 부여했고 여기에는 perspective:100px; 스타일이 들어 있습니다. 위에서 말씀드렸듯 원근감을 나타내는 것으로 값이 적어질수록 완전 다이나믹한 원근감을 선사합니다. a 요소 위에 마우스를 올렸을 때, cov18이라고 하는 클래스값을 가진 div가 transform 하게 되는데, rotateY(45deg) 즉 Y축을 기준으로 45도 회전한다는 뜻이 됩니다. 그래서 입체감 있는 움직임을 볼 수 있게 되는 것 입니다. -webkit- 은 밴더 접두사로서 브라우저마다 지원하는 기술이 조금씩 다르기에 이 접두사를 각 브라우저에서 작동할 수 있도록 넣어주는것이 좋습니다. 언젠가는 CSS3 에서 구현가능한 모든 기능을 각 브라우저에서도 다 지원하는 날이 오게 될 것입니다. 그때까진 귀찮더라도 써줘야죠. 다음은 matrix 요소 입니다.

transform: matrix(2,1,-1,1.5,30,-45);

이것은 원근감(perspective)을 제외한 나머지 스타일을 일괄 적용시킬 수 있는 매소드 입니다. 보시면 총 여섯개의 숫자가 들어갑니다. 각 설명은 위의 코딩에 주석처리가 되어 있는 부분에 나와있지만 한번 더 여기에서 설명하겠습니다.

matrix (scaleX, skewX, skewY, scaleY, translateX, translateY)

네. 이것을 기억해 주시기 바립니다. 솔직히 처음에는 많이 햇갈릴 수 있습니다. 저도 몇번 사용하고 또 사용하니까 겨우 감이 오기 시작했는데요, 잘 모르신다면 그냥 scale, skew, rotate, translate를 따로 사용하셔도 상관 없습니다. 그리고 이런 복잡한 애니메이션 효과는 오히려 가독성을 떨어뜨릴 수 있어서 잘 사용하지는 않습니다. 그냥 참고만 하시면 될 것 같습니다. 끝.

CSS3 마우스 올렸을 때 움직이는 애니메이션 배너 만들기

CSS text-shadow box-shadow 요소 그림자 효과 사용법

"친절한효자손 취미생활" 을 검색!