ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • CSS3와 애니메이션
      CSS 2023. 6. 22. 14:43

      변형

       

      translate 함수

      지정한 방향으로 이동할 거리를 지정하면 해당 요소를 이동시킴

       

      예제) translate (지정된 위치 이동)

       

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .origin{
            border: 1px solid black;
            margin: 40px;
            float: left;
        }

        .movex:hover{
            /* 오른쪽으로 이동 */
            /* transform: translateX(50px); */
            /* 왼쪽으로 이동 */
            transform: translateX(-50px);
        }
        .movey:hover{
            /* 아래로 이동 */
            /* transform: translateY(20px); */
            /* 위로 이동 */
            transform: translateY(-20px);
        }
        .movexy:hover{
            /* 오른쪽, 아래로 대각선 방향으로 이동 */
            /* transform: translate(10px,20px); */
            /* 왼쪽, 위로 대각선 방향으로 이동 */
            transform: translate(-10px,-20px);
        }
    </style>
</head>
<body>
    <div class="origin">
        <div class="movex">
            <img src="images/bus.jpg">
        </div>
    </div>
    <div class="origin">
        <div class="movey">
            <img src="images/bus.jpg">
        </div>
    </div>
    <div class="origin">
        <div class="movexy">
            <img src="images/bus.jpg">
        </div>
    </div>
</body>
</html>

       

      scale 함수

      지정한 크기만큼 요소를 확대/축소

       

      예제) scale ( 확대or축소)

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .origin{
            border: 1px solid black;
            margin: 40px;
            float: left;
        }
        .scalex:hover{
            /* 가로 1.2배 확대 */
            transform: scaleX(1.2);
        }
        .scaley:hover{
            /* 세로 1.5배 확대 */
            transform: scaleY(1.5);
        }
        .scale:hover{
            /* 가로, 세로 축소됨 */
            transform: scale(0.7);
        }
    </style>
</head>
<body>
    <div class="origin">
        <div class="scalex">
            <img src="images/fruit.jpg">
        </div>
    </div>
    <div class="origin">
        <div class="scaley">
            <img src="images/fruit.jpg">
        </div>
    </div>
    <div class="origin">
        <div class="scale">
            <img src="images/fruit.jpg">
        </div>
    </div>
</body>
</html>

       

      rotate 함수 각도만큼 웹 요소를 시계 방향이나 시계 반대 방향으로 회전

       

      예제) roatate (각도만큼 회전)

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .origin{
            border: 1px solid black;
            margin: 40px;
            float: left;
        }
        .rotate1:hover{
            /* 시계방향으로 20도 회전함 */
            transform: rotate(20deg);
        }
        .rotate2:hover{
            /* 반시계방향으로 40도 회전함 */
            transform: rotate(-40deg);
        }
    </style>
</head>
<body>
    <div class="origin">
        <div class="rotate1">
            <img src="images/fruit.jpg">
        </div>
    </div>
    <div class="origin">
        <div class="rotate2">
            <img src="images/fruit.jpg">
        </div>
    </div>
</body>
</html>

       

      skew 함수

      요소를 지정한 각도만큼 비틀어 왜곡

       

      예제) skew (지정된 방향으로 각도만큼 비틀기)

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .origin{
        border: 1px solid black;
        margin: 100px;
        float: left;
    }
    .skewx:hover{
        /* x축으로 30도 비틀기 */
        transform: skewX(30deg);
    }
    .skewy:hover{
        /* y축으로 15도 비틀기 */
        transform: skewY(15deg);
    }
    .skewxy:hover{
        /* x,y축으로 비틀기 */
        transform: skew(-25deg, -15deg);
    }
</style>
</head>
<body>
    <div class="origin">
<div class="skewx">
    <img src="images/rose.jpg">
</div>
    </div>
    <div class="origin">
<div class="skewy">
    <img src="images/rose.jpg">
</div>
    </div>
    <div class="origin">
<div class="skewxy">
    <img src="images/rose.jpg">
</div>
    </div>
</body>
</html>

       

      transform-origin 속성 특정 지점을 변형의 기준으로 설정

       

      예제) origin (특정지점을 기준으로 변형)

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .origin{
            border: 1px solid black;
            margin: 40px;
            float: left;
        }
        .rose{
            /* z축으로 10도 회전 */
            transform: rotateZ(10deg);
        }
        .ltop .rose{
            /* 왼쪽, 위 기준으로 변경 */
            transform-origin: left top;
        }
        .rtop .rose{
            /* 오른쪽,위 기준으로 변경 */
            transform-origin: right top;
        }
        .lbottom .rose{
            /* 왼쪽,아래 기준으로 변경 */
            transform-origin: left bottom;
        }
        .rbottom .rose{
            /* 오른쪽,아래 기준으로 변경 */
            transform-origin: right bottom;
        }
    </style>
</head>
<body>
    <div class="origin">
<div class="ltop">
    <img src="images/rose.jpg" class="rose">
</div>
    </div>
    <div class="origin">
<div class="rtop">
    <img src="images/rose.jpg" class="rose">
</div>
    </div>
    <div class="origin">
<div class="lbottom">
    <img src="images/rose.jpg" class="rose">
</div>
    </div>
    <div class="origin">
<div class="rbottom">
    <img src="images/rose.jpg" class="rose">
</div>
    </div>
</body>
</html>

       

      perspective 속성 원근감을 갖게 함. 속성 값은 0보다 커야 하며 값이 클수록 사용자로부터 멀어짐.

       

      예제) perspextive (원근감을 주면서 지정된 위치로 변형)

       

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #no-pers, #pers{
            border: 1px solid black;
            margin: 30px;
            float: left;
        }
        .rotatex{
            /* x축으로 회전하면서 찌그러지듯이 보임 */
            transform: rotateX(50deg);
        }
        #pers {
            /* 300px 만큼 원근감 적용 */
            perspective: 300px;
        }
    </style>
</head>
<body>
    <h4>원본 이미지</h4>
    <div>
        <img src="images/sunset.jpg">
    </div>
    <div id="no-pers">
        <div class="rotatex">
            <img src="images/sunset.jpg">
        </div>
    </div>
    <div id="pers">
        <div class="rotatex">
            <img src="images/sunset.jpg">
        </div>
    </div>
</body>
</html>

       

      perspective-origin 속성 입체적으로 표현할 요소의 아랫부분(bottom) 위치 지정 좀더 높은 곳에서 원근을 조절하는 듯한 느낌을 갖게 함

       

      예제) perspective-origin (perspective와 비슷하나 좀더 원근감을 줘서 3d느낌을 줌)

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .origin{
            border: 1px solid black;
            margin: 56px;
            float: left;
            /* x축,y축 회전한 느낌이 남 */
            perspective: 200px;
        }
        .rotatex {
            transform: rotateX(45deg);
        }
        .rotatey {
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="origin">
        <div class="rotatex">
            <img src="images/fruit.jpg">
        </div>
    </div>
    <div class="origin">
        <div class="rotatey">
            <img src="images/fruit.jpg">
        </div>
    </div>
</body>
</html>

       

      transform-style 속성 부모 요소에 적용한 3D 변형을 하위 요소에도 적용

       

      예제) treansform-style (box 부모요소,하위요소 3d 적용)

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .container{
            border: 1px solid black;
            margin-top: 100px;
            margin-left: 100px;
            float: left;
            perspective: 300px;
        }
        .box1{
            background: #82cbd8;
            transform: rotateY(45deg);
        }
        .box2{
            background: #0d6097;
            transform: rotateX(45deg);
            transform-origin: left top;
        }
        #tr-style1{
            /* flat : 기본값으로 평평한 */
            transform-style: flat;
        }
        #tr-style2{
            /* preserve-3d : 3d 효과 */
            transform-style: preserve-3d;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1" id="tr-style1">
            <div class="box2"></div>
        </div>
    </div>
    <div class="container">
        <div class="box1" id="tr-style2">
            <div class="box2"></div>
        </div>
    </div>
</body>
</html>

       

      backface-visibility 속성 요소의 뒷면, 즉 반대쪽 면을 표시할 것인지 결정

       

      예제) backface- visvility (뒷면에 텍스트 표시)

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1{
        font-size: 60px;
    }
    div{
        width: 200px;
        height: 200px;
    }
    .container{
        border: 1px solid black;
        margin-top: 100px;
        margin-left: 100px;
        float: left;
        perspective: 300px;
    }
    .box{
        background: #82cbd8;
        transform: rotateY(95deg);
    }
    #back1{
        /* visible : 기본값 */
        backface-visibility: visible;
    }
    #back2{
        /* hidden : 뒷면 숨김 */
        backface-visibility: hidden;
    }
</style>
<body>
    <div class="container">
        <div class="box" id="back1">
            <h1>BACK</h1>
        </div>
    </div>
    <div class="container">
        <div class="box" id="back2">
            <h1>BACK</h1>
        </div>
    </div>
</body>
</html>

      'CSS' 카테고리의 다른 글

      반응형 웹이란  (0) 2023.06.22
      트랜지션과 애니메이션  (0) 2023.06.22
      다재다능한 CSS3 선택자  (0) 2023.06.22
      HTML5와 멀티미디어  (0) 2023.06.22
      HTML5와 시맨틱 태그  (0) 2023.06.22

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바