프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] CSS3 2D Transform 속성 알아보기 – scale, rotate, skew, translate

2022.09.06
북마크 [출처 이동]    작성자 정보

Transform 
- scale 크기
=> trnasform:scale(2.0, 2.5)  가로 2배, 세로 2.5배 
- rotate 회전 (0~360deg)
=> trnasform:rotate(90deg), 
=> transform:rotateX(90deg). X축 방향으로 회전
=> transform:rotateY(90deg). Y축 방향으로 회전

- skew 기울기
=> transform :skewX(30deg); 가로방향으로 30도 비틉니다.
=> transform :skewY(30deg); 세로방향으로 30도 비틉니다.
=> transform :skewX( 30deg, 60deg); 가로30도, 세로60도 비틉니다.
- trnaslate 위치 이동(px, %, ...)
=> transform:translateX(50%); X축으로 50% 이동
=> transform:translateY(50%); Y축으로 50% 이동
=> trnasform:trnaslate(-50%, -50%); 
- perspective 3D효과를 위한 원근감 부여 (부모요소에 적용)
- matrix - perspective를 제외한 모든 요소들을 한번에 일괄 적용시킴 
- matrix (scaleX, skewX, skewY, scaleY, translateX, translateY) 

 

① transform: translate (50px 50px);
= 왼쪽50px, 아래쪽으로 50px을 이동

② transform: translateX (100px);
= X축에 오른쪽으로 100px 이동

③ transform: translateY (-100px);
④ transform: translateZ (-100px);


** transform
transform은요소를여러가지방법으로변형시키는것을말합니다.
주요변형속성으로translate,scale,rotate를알아보도록할게요.


.hello:hover {
transform: translate(20px, 40px);
}
translate는요소를정한값만큼이동시킵니다.translate(X축,Y축)형식으로지정합니다.


.hello:hover {
transform: scale(2, 2.5);
}
Scale은요소의사이즈를결정합니다.또한자식요소까지함께변한다는특성이있습니다.
단위는배이고scale(X,Y)와같이사용합니다.다음과같은코드를실행하면요소사이즈가기존가로의2배,세로는기존세로의2.5배로늘어나게됩니다.


.hello:hover {
transform: rotate(45deg);
}
다음으로rotate입니다.rotate는요소의회전을결정합니다.또한각도를나타내는deg단위를씁니다.이코드를실행하면45도회전하게되겠네요.





transition
transition을사용하면요소가변할때변화는과정을보여줍니다.쉽게말해애니메이션효과이죠.

transition: property duration timing-function delay;

property자리에는효과를적용할속성을지정합니다.예를들어,width가변하는과정을보여주고싶으면width를쓰면됩니다.모든속성을지정할때는all을씁니다.
duration자리에는지속시간을정합니다.3초에걸쳐애니메이션효과를적용하고싶다면3s라고입력하면됩니다.
timing-function자리에는효과의속도변화유형을지정합니다.다음페이지로넘어가서변화유형을살펴보세요.


linear - 딱딱함(등가속도)
ease - 부드럽게 시작하고 빨라진 뒤 부드럽게 끝남(기본값)
ease-in - 부드럽게 시작함
ease-out - 부드럽게 끝남
ease-in-out - 부드럽게 시작하고 부드럽게 끝남

이외에도cubic-bezier(n,n,n,n)과같은고급기술도존재합니다.

delay자리에는지연시간을지정합니다.예를들어2s이런식으로쓸수있겠죠.



.hello {
transition: transform 1s ease .5s;
}
다음은예제코드입니다.transform속성이변할때ease속도변화를가진transition효과를0.5초지연한뒤1초동안지속시킵니다.


http://relation.co.kr/images_board/board_system_ssac/25/test1.html
https://www.codingfactory.net/12593
https://www.codingfactory.net/12593












nav ul li {
position: relative;
width: 70px;
cursor: pointer;
background: crimson;
text-transform: uppercase;
transition: all .4s ease-out;
list-style: none;
}
이코드를보면list에대해서4초에걸쳐부드럽게끝나는효과를적용하고있어요.




nav ul li:after {
position: absolute;
background: white;
color: crimson;
top:0;
left: 70px;
width: 70px;
height: 100%;
opacity:.5;
transform: perspective(400px) rotateY(90deg);
transform-origin: 0 50%; /* 축 설정 */
transition:all .4s ease-out;
}
그다음코드를이해하려면가상클래스에대해알아야하는데요,가상클래스란요소가없지만있는것처럼쓰는것을말해요.




더쉽게설명하자면,body태그안의코드를보면어디에서도"HELLO"라는글자를찾아볼수없어요.하지만nav바에는HELLO가쓰여져있죠.
nav ul li:nth-child(1):after {
content: "Hello";
line-height: 70px;
}
nav ul li:nth-child(2):after {
content: "WOW";
line-height: 70px;
}
nav ul li:nth-child(3):after {
content: "OH";
line-height: 70px;
}
nav ul li:nth-child(4):after {
content: "YEAH";
line-height: 70px;
}


바로이코드때문에그런거에요.li의첫번째자식뒤에"Hello"를쓰도록했기때문이죠.
이런식으로가상클래스는:before,:after이런식으로사용할수있습니다.


nav ul li:after {
position: absolute;
background: white;
color: crimson;
top:0;
left: 70px;
width: 70px;
height: 100%;
opacity:.5;
transform: perspective(400px) rotateY(90deg);
transform-origin: 0 50%; /* 축 설정 */
transition:all .4s ease-out;
}
다시돌아가서,이코드는li의뒤에하나의박스를설정한거예요.배경색이하얀색이고글자는빨간색으로설정한것이죠.
또한여기서perspective가사용되었는데perspective는공간과거리를나타내는속성으로perspective(px)형식으로사용합니다.

값으로는주로100px~200px을사용하며값이높을수록멀리보는것으로기울기가작아집니다.반대로값이작을수록가까이보는것으로기울기가커집니다.

transform: perspective(400px) rotateY(90deg);
즉,Y축을기준으로90도를회전시키는데그Y축으로부터400px떨어진곳에서회전을시키게됩니다.


transform-origin: 0 50%;
형식은transform-origin:X축Y축;이구요.따라서여기서는X축은0,Y축은50%로잡은것이되겠네요.


nav ul li:hover {
transform: perspective(400px) rotateY(-90deg);
}

nav ul li:hover {
transform: translateX(-70px);
}

nav ul li:hover:after {
opacity: 1;
transform: perspective(400px) rotateY(0deg) scale(1) ;
}
}
다음코드는li에마우스를올려놓았을때Y축을기준으로-90도회전하도록하였죠.

그리고동시에transform:translateX(-70px);를적용하여X축을-70px만큼밀어버리게돼요.따라서빨간박스가왼쪽으로밀리게되는것이죠.



nav ul li {
position: relative;
width: 70px;
cursor: pointer;
background: crimson;
text-transform: uppercase;
transition: all .4s ease-out;
list-style: none;
}


이때중요한건빨간박스의가로크기가70px이어야한다는거예요.그래야X축으로-70px만큼밀때빨간박스가완전히밀리게될테니까요.




nav ul li:hover:after {
opacity: 1;
transform: perspective(400px);
}

그다음li가hover가된뒤에불투명도를1로하여완전히보이게하고perspective를400px로주었어요.

--------------------------------------------------------------------------------

https://rgy0409.tistory.com/2990 [친절한효자손 취미생활]

CSS3 2D Transform 속성 알아보기 – scale, rotate, skew, translate|작성자 html5around
 

이 포스트 공유하기

전체목록