#transform

#transform

2023. 6. 14. 21:11ㆍWEB-FRONTEND/CSS

시작하기 앞서

개발자는 다들 기술블로그라는 것을 가지고 있는 듯하다.

자신이 어느 기술스택을 가지고 있는지에 대한 기술스택에 대한 자기 증명, 취업을 위한 스펙, 잊히는 기초지식을 방지하기 위한 사전식기록 기타 등등 각자의 이유는 다르겠지만

개발자라고 부르기에도 아직은 민망한 비전공자인 필자는 이 블로그를 통해 하루하루 인강 등을 배운 지식을 복기하며 본인의 지식으로 만들기 위한 장으로써 이 블로그를 활용하고자 한다.

transform 이란?

CSS의 속성중 하나로써

대입되는 대상의 이동, 회전, 확대축소 ,비틀기 등의 변형 효과를 줄 수 있다.

일반적으로 알고 있는 사전적인 의미와 뜻은 같다고 할 수 있다.

기본 문법

transform: 변경요소(변경수치);

변경 요소중에 대표적인 4가지

이동 translate(x, y)

확대축소 scale(x, y)

비틀기 skew(x-angle, y-angle)

회전 rotate(angle)

위의 요소 옆에 x,y 를 붙이는것으로 특정 좌표만 선택하는 것도 가능하다

ex) transform: translatey(20px); // 해당요소를 y축방향으로 20px 이동

실습 예시

아래부턴 오늘실습한 내용과 속성이 적용된 실제 이미지 의 모습이다.

기본구조

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07-01-transform</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="container">
        <div class="base"></div>               // 원본 사이즈를 비교를위한 박스
        <div class="target target1">           // transform 이적용될 target
            <span>translate</span>             
        </div>
    </div>
</body>
</html>

css

*{
    box-sizing: border-box;
}

.container{
    width: 500px;
    height: 320px;
    position: relative;
    margin-left: 100px;
    margin-top: 100px;
}

.base{
    width: 200px;
    height: 200px;
    border: 2px dashed #aaaaaa;
    border-radius: 10px;
    background-color: #dddddd;
}

.target {
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 255, 0.8);
     position: absolute;   /*target 과 base 를 겹치게하기위한 position 절대지정*/
    top: 0;
    left: 0;
    border: 2px solid blue;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

좌표 이동

.target1{
    transform: translate(50%, 20px);   /* x좌표로 50%만큼 y좌표로 20px 만큼이동*/
}

확대축소

.target1{
    transform: scale(0.8, 1.2); /*x값(가로) 0.8배로 축소  y값(세로) 1.2배로 확대*/
}

비틀기

변경수치에는 각도가 들어가기 때문에 deg가 붙음에 유의하자

.target1{
    transform: skew(30deg, 20deg); /*x축으로 30° y축으로 20° 비틀기*/
}

회전

각도가 양수일때는 시계방향으로 회전한다 반시계방향으로 회전시키고 싶을때는 변경수치앞에 - 를 붙여 수치를 음수로 만들어 주면 된다.

.target1{
    transform: rotate(45deg);  /*시계방향으로 45° 회전*/
}

레퍼런스

인프런 코드캠프 강력한css 강의

'WEB-FRONTEND > CSS' 카테고리의 다른 글

#animation (0)	2023.06.14

#animation 2023.06.14

윤원이개발나라