HTML&CSS 22일차 (정리x)

728x90

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>트랜지션(중요)</title>
</head>
<style>
    div {
        width: 300px;
        height: 300px;
        background-color: #ffd6de;
        /*
          px 단위 % 단위를 사용할 수 있는데, %값은 본 요소의 크기를 기준으로 함
          translate(x, y): 가로방향 x, 세로방향 y만큼 이동
          translateX: 가로방향으로만 x만큼
          translateY: 세로방향으로만 y만큼
          scale(x): x만큼 확대/축소 함 원래 크기 기준으로 0%~?%까지 가능
          rotate(deg): deg단위로 요소를 회전시킴. 양수는 시계, 음수는 반시계방향
         */
        position: relative;
        top: 200px;
        left: 200px;
        border-width: 10px;
        border-style: solid;
        border-top-color: red;
        border-right-color: purple;
        border-bottom-color: blue;
        border-left-color: orange;
        /*transform: translateX(10px) rotate(45deg);
         !순서 중요! 순서 바뀌면 위치도 바뀜 => 축의 방향이 회전해서 축기준으로 이동하기 때문 */

        transition-duration: 1s; /* 변경이 얼마동안 이루어질 것이냐 */
        transition-property: all; /* 기본값: all, 어떤 속성을 transition 적용시킬 것이냐*/
        /*transition-delay: 1s; !* 얼마 기다리고 적용 될 것이냐 *!*/
        transition-timing-function: cubic-bezier(1, 0.08, 0.06, 0.57);
        /* cubic-bezier: 4개의 값 설정하기(웹에서 f12눌러서 곡선그래프로 확인할 수 있음 */

    }
    #d0:hover{
        transform: translateX(1000px) rotate(45deg);
    }
    #d1:hover{
        background-color: black;
        transform: scale(200%) rotate(45deg);
    }
    #d2:hover{
        transform: rotateX(50deg);
        perspective: 300px; /* 원근감 추가 */
    }
    #d3:hover{
        transform: skew(30deg, -15deg); /* 축 기준 30도 비틀기 */
    }
</style>
<body>
    <div id="d0"></div>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>
</html>

728x90

저작자표시 비영리 변경금지

'💜 HTML,CSS' 카테고리의 다른 글

HTML&CSS 24일차 (정리x) (0)	2024.03.23
HTML&CSS 23일차 (정리x) (0)	2024.03.23
HTML&CSS 21일차 (정리x) (0)	2024.03.23
HTML&CSS 실습7 (정리x) (0)	2024.03.23
HTML&CSS 20일차 (정리x) (0)	2024.03.23

'💜 HTML,CSS' 카테고리의 다른 글

티스토리툴바