티스토리 뷰

Web/HTML & CSS

25강 : CSS 변환(transform)

개발을해보자 2020. 3. 2. 19:22

25-1. 변환 속성

과거 javascript에서만 구현이 가능한 변환(transform) 기능을 이제는 CSS3에서도 구현할 수 있다.

 

skewX( ) : x축 방향으로 주어진 각도만큼 기울인다.
scaleX( ) : x축 크기를 주어진 배율만큼 늘리거나 줄인다.
scale(x,y) : 크기를 주어진 배율만큼 늘리거나 줄인다.
translate(x, y) : 현재 위치에서 주어진 x축과 y축의 거리만큼 이동시킨다.
rotate(n) : n도만큼 회전시킨다.

 

애니메이션 효과를 부여할 태그에 다음과 같은 속성도 넣을 수 있다.

transform-origin : 가로 세로 (%단위를 사용. 좌측 상단 기준 0%, 0%이고, 우측 하단 기준 100%, 100%이다.)

z-index : 겹치는 다른 요소와의 상하관계를 설정해준다. (값 높을수록 우선순위 높아서 더 앞에 위치하게 된다.)

 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="prefixfree.min.js"></script>
    <style>

        * { margin:0; padding:0; }
        li { list-style:none }
        a { text-decoration:none; }

        #wrap { width:800px; height:500px; margin:0 auto; }
        #wrap #lnb ul {  }
        #wrap #lnb ul li { float:left; }
        #wrap #lnb ul li a { display:block; padding:5px 64px; background-color:#66b57b; color:#ffffff; }

        #wrap #lnb ul li:nth-child(1) a:hover { background-color:#35864a; 
                                                transform:scale(2); transform-origin:50% 0; z-index:9999; }

        #wrap #lnb ul li:nth-child(2) a:hover { background-color:#35864a; 
                                                transform:rotate(5deg); z-index:9999; }

        #wrap #lnb ul li:nth-child(3) a:hover { background-color:#35864a; 
                                                transform:skewX(-15deg); z-index:9999; }

        #wrap #lnb ul li:nth-child(4) a:hover { background-color:#35864a; 
                                                transform:scale(2) rotate(5deg) skewX(-15deg); 
                                                transform-origin:50% 0; z-index:9999; }

        #wrap #lnb ul li:nth-child(5) a:hover { 
            background-color:#35864a;
            animation-name:ani; animation-duration:2s;  animation-iteration-count:infinite; animation-direction:alternate;
        }

        @keyframes ani {
            from {
                
            }

            to {
                background-color:#ffff00; transform:scale(2) rotate(5deg) skewX(-15deg); transform-origin:50% 0; z-index:9999;
            }
        }

    </style>

</head>
<body>

    <div id="wrap">
        <div id="lnb">
            <ul>
                <li><a href="#none" alt="">lnb1</a></li>
                <li><a href="#none" alt="">lnb2</a></li>
                <li><a href="#none" alt="">lnb3</a></li>
                <li><a href="#none" alt="">lnb4</a></li>
                <li><a href="#none" alt="">lnb5</a></li>
            </ul>
        </div>
    </div>

</body>
</html>

lnb4에 hover 했을 때 나타나는 효과

 

 

 

 

 

 

출처

https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C#

인프런 실전 HTML & CSS 강좌

'Web > HTML & CSS' 카테고리의 다른 글

27강 : 반응형 웹  (0) 2020.03.04
26강 : CSS 규칙  (0) 2020.03.03
24강 : CSS 애니메이션  (0) 2020.03.02
23강 : CSS 변형  (0) 2020.03.01
13강 : CSS 속성4  (0) 2020.03.01
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함