16일차 프론트엔드 공부

프론트엔드 공부/CSS 기초

16일차 프론트엔드 공부 - transform

프망생222 2024. 9. 21. 17:34

- 16일차 프론트엔드 공부 -

transform

1. 변형 시킨다는 의미

2. 요소에 이동, 회전, 확대축소, 비틀기 등의 변형 효과를 줄 수 있다.

transform의 속성값

translate(x, y)

scale(x, y)

skew(x-angle, y-angle)

rotate(angle)

translate(x, y)

요소의 좌표를 움직일 수 있다.

x축으로 x만큼, y축으로 y만큼 이동시킨다.

transform: translate(20px, 20%)

translateX(n)

요소의 X축 좌표를 n만큼 움직일 수 있다.

transform: translateX(20px)

translateY(n)

요소의 Y축 좌표를 n만큼 움직일 수 있다.

transform: translateY(20px)

scale(x, y)

X축으로 x만큼, Y축으로 y만큼, 요소를 축소 혹은 확대한다.

transform: scale(0.75, 1.1)

scaleX(n)

요소를 X축 방향으로 n만큼 축소 혹은 확대한다.

transform: scaleX(1.1)

scaleY(n)

요소를 Y축 방향으로 n만큼 축소 혹은 확대한다.

transform: scaleY(0.45)

skew(x-angle, y-angle)

X축으로 x도 만큼, Y축으로 y도 만큼, 요소를 기울인다.

transform: skew(15deg, 10deg)

skewX(n)

요소를 X축으로 n도 만큼 기울인다.

transform: skewX(15deg)

skewY(n)

요소를 Y축으로 n도 만큼 기울인다.

transform: skewY(15deg)

rotate(angle)

요소를 n만큼 회전시킨다.

transform: rotate(45deg)

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="container">
        <div class="base"></div>
        <div class="target target1">
            <span>translate</span>
        </div>
    </div>
    <div class="container">
        <div class="base"></div>
        <div class="target target2">
            <span>scale</span>
        </div>
    </div>
    <div class="container">
        <div class="base"></div>
        <div class="target target3">
            <span>skew</span>
        </div>
    </div>
    <div class="container">
        <div class="base"></div>
        <div class="target target4">
            <span>rotate</span>
        </div>
    </div>
</body>
</html>

* {
    box-sizing: border-box;
}

.container {
    width: 500px;
    height: 320px;
    position: relative;
}

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

.target {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 255, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid blue;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.target span {
    color: #ffffff;
}

.target1 {
    transform: translate(50%, 20px);
}

.target2 {
    transform: scale(0.8, 1.2);
}

.target3 {
    transform: skew(30deg, 0);
}

.target4 {
    transform: rotate(45deg);
}

transform 중

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="container">
        <div class="base"></div>
        <div class="target target1">
            <span>quiz</span>
        </div>
    </div>
</body>
</html>

* {
    box-sizing: border-box;
}

.container {
    width: 500px;
    height: 320px;
    position: relative;
}

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

.target {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 255, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid blue;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.target span {
    color: #ffffff;
}

.target1 {
    transform: scaleY(0.75) skewX(20deg);
}

transform + translate

위 이미지 처럼 박스에 마우스를 두면 한글자씩 올라가는 박스를 만들어 볼 것이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="box">
        <span id="text1">T</span>
        <span id="text2">R</span>
        <span id="text3">A</span>
        <span id="text4">N</span>
        <span id="text5">S</span>
        <span id="text6">F</span>
        <span id="text7">O</span>
        <span id="text8">R</span>
        <span id="text9">M</span>
    </div>
</body>
</html>

* {
    box-sizing: border-box;
}

.box {
    width: 600px;
    height: 120px;
    background-image: linear-gradient(to top, blue, orange);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.box span {
    font-size: 35px;
    color: white;
    font-weight: 600;
    transition: transform 0.4s ease-in-out;
}

.box #text1 {
    transition: transform 0.4s ease-in-out;
}

.box #text2 {
    transition: transform 0.4s ease-in-out 0.1s;
}

.box #text3 {
    transition: transform 0.4s ease-in-out 0.2s;
}

.box #text4 {
    transition: transform 0.4s ease-in-out 0.3s;
}

.box #text5 {
    transition: transform 0.4s ease-in-out 0.4s;
}

.box #text6 {
    transition: transform 0.4s ease-in-out 0.5s;
}

.box #text7 {
    transition: transform 0.4s ease-in-out 0.6s;
}

.box #text8 {
    transition: transform 0.4s ease-in-out 0.7s;
}

.box #text9 {
    transition: transform 0.4s ease-in-out 0.8s;
}

.box:hover span {
    transform: translateY(-20px);
}

'프론트엔드 공부 > CSS 기초' 카테고리의 다른 글

18일차 프론트엔드 공부 - grid (0)	2024.09.23
17일차 프론트엔드 공부 - animation (0)	2024.09.22
15일차 프론트엔드 공부 - 함수, position, transition (0)	2024.09.19
14일차 프론트엔드 공부 - 폰트, 단위 (0)	2024.09.12
13일차 프론트엔드 공부 - 폰트, 단위 (1)	2024.09.11

현재글16일차 프론트엔드 공부 - transform

프론트엔드 지망생

fmang 님의 블로그 입니다.

Today :
Yesterday :

프론트엔드 지망생