입문

"transform은 무엇을 할 수 있습니까?"
"transform은 언제 사용합니까?"
나는 이런 일에 관해 쓰고 싶다.
많은 분들이transform 자체를 사용해 본 적이 없는 것 같아요.
나는 웹 디자인을 하는 과정에서 반드시 볼 수 있을 것이라고 생각한다.
나는 그런transform을 총괄하고 싶다.

transform 정보

역변환을 사용하면 디자인에 이동, 회전, 스트레칭, 경사 효과를 제공할 수 있다.그것은 2차원 운동뿐만 아니라 3차원 운동도 지원한다.

transform 유형

transform은 네 개의 함수를 제공합니다.

translate()이동

rotate()회전

scale()신축

skew() 기울기

transform의 사용 방법

각 함수에는 X, Y, Z 및 3D가 있습니다.translateX() 과 같이 () 이전에 X, Y, Z, 3D를 작성하여 축에 함수를 사용할 수 있습니다.
또한 translate(X,Y,Z) 와 같이 각 축에 함수를 사용할 수도 있습니다.
index.html

<div class="transform">Transform<div>

style.css

.transform{
    padding: 10px 20px;
    background: #59b1eb;
    text-align: center;
    color: #fff;
    width: 30%;
}

이 html, css에 대해transform을 사용하고 싶습니다.
이해하기 쉽도록 :hover,transition을 사용하고 싶습니다.
hover는 커서를 요소 위에 놓을 때 적용할 요소입니다.
transition은transform을 응용할 때 시작부터 끝까지 시간을 확정할 수 있습니다.

translate

translate는 요소에 이동 효과를 추가할 수 있습니다.
style.css

.transform{
    padding: 10px 20px;
    background: #59b1eb;
    text-align: center;
    color: #fff;
    width: 30%;
    transition: 1s;
}

.transform:hover{
    transform: translate(20px,20px)
}

.transform에 추가transition: 1s;새로 추가했습니다.transform:hover{
transform: translate(20px,20px)
}.
동작을 확인해 주세요.
X축 방향 20px, Y축 방향 20px 이동을 확인하고 싶습니다.

rotate

회전은 요소에 회전 효과를 추가할 수 있습니다.
style.css

.transform:hover{
    transform: rotateX(360deg)
}

rotate가 아닌 degree'도'를 나타낼 때pxdeg.
이 코드는 X축을 기준으로 360도 회전합니다.확인 좀 해주세요.
style.css

.transform:hover{
    transform: rotateY(360deg)
}

이 경우 Y축을 기준으로 회전하는지 확인할 수 있습니다.

scale

scale는 요소에 신축 효과를 추가할 수 있습니다.
style.css

.transform:hover{
    transform: scale(1.5,1.5)
}

값이 사용되지 않음px 또는 사용되지 않음deg.
1.5를 쓰는 것은 요소의 1.5배, 2.0을 쓰는 것은 요소의 2배이다.또 -2.0을 쓰면 요소의 1/2배다.
나는 이 코드를 통해 X축, Y축이 모두 1.5배라는 것을 확인할 수 있다고 생각한다.

skew

skew는 원소를 기울일 수 있습니다.
다른 요소와 달리 X축 Y축에만 사용할 수 있는 특징이 있습니다.이 밖에 값 사용deg.
style.css

.transform:hover{
    transform: skew(30deg,30deg)
}

다른 요소와 달리 X축 Y축에만 사용할 수 있는 특징이 있습니다.이 밖에 값 사용deg.

transform-igin 정보

transform-origin 요소 변화에 대한 참조점을 설정할 수 있습니다.
style.css

.translate:hover{
    transform: rotate(45deg);
    transform-origin: top left;
}

데이텀 점 설정 방법 정보
- 절대 지정(px)
- 상대 지정 (%)
- 포지셔닝(top, center, left 등)
에서 설명한 대로 해당 매개변수의 값을 수정합니다.
대체적으로 가능하다면 위치 지정으로 나눌 수 있고, 상세하게 결정하려면 절대 지정으로 나눌 수 있으며, 상대 지정을 사용할 수 있다.

총결산

transform을 장악하면 웹 디자인의 범위가 매우 넓어질 것이다.
기초적인 사용법이라도 폭을 충분히 넓힐 수 있다.
꼭 배워야 돼.