transform

다양한 도형의 변형을 구현하며, 애니메이션을 사용하기 위해서는 transition의 도움이 필요하다. 예를들어 hover시, 원래 요소에는 기본적으로 보여질 transform을, hover에는 변형될 transform을 각각 작성 후 transition 효과를 넣어준다.

• rotate = 회전

  • transform: rotate(90deg);
  • transform: rotateX(180deg);
  • transform: rotateY(180deg);

• scale = 확대, 축소

  • transform: scale(1.5);
  • transform: scaleX(1.5);
  • transform: scaleY(1.5);

• skew = 마름모꼴 왜곡

  • transform: skew(30deg, 10deg);
  • transform: skewX(20deg);
  • transform: skewY(40deg);

• translate = 이동

  • transform: translate(20%, 50%);
  • transform: translateX(50%);
  • transform: translateY(100px);

<style>
	.box{
		width: 200px; height: 200px; border: 1px solid #000;
		transform: translate(0); 
        /* 또는? transform-origin: center; */
		transition: all 0.5s;
        
	.box:hover{
        transform: translate(20%, 50%); 
	}
    
    /* 중앙정렬 */
    .box{
    	position: absolute;
    	left: 50%;
	    top: 50%;
   		transform: translate(-50%, -50%);
        /* 
            -50% : 해당 요소 사이즈의 반만큼 반대방향으로 움직이는 것 
            사이즈가 변형이 되어도 저절로 중앙정렬이 되는 장점이 있다.
        */
	}
</style>

transform-origin = 기준점

위의 변형들이 이 기준점을 중심으로 이루어지도록 한다.

• transform-origin: center;
• transform-origin: right;
• transform-origin: left top;
• transform-origin: 100px 120px;

< 버튼 애니메이션 만들기 >

<style>
		a{
            display: block;
            position: relative;
            width: 180px;
            height: 50px;
            border: 1px solid #000;
            font-size: 23px;
            line-height: 50px;   
            text-align: center;
            color: #000;
            text-decoration: none;

            transition: all 0.5s;
        }

        /* a(인라인)태그에 position을 줘도 block화 된다..! */
        a::after,
        a::before{
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            width: 50%;
            height: 100%;
            background: #000;
            z-index: -1; /* body 밑으로 깔림 */

            transform: scaleX(0);
            transition: transform 0.5s;
            /* transform-origin은 transition주면 안된다.(중심이 이동되니까)
            transform만 따로 지정하기 */
        }
        a::after{right: 0; transform-origin: right;}
        a::before{left: 0; transform-origin: left;}

        a:hover{color: #fff;}

        a:hover::after,
        a:hover::before{transform: scaleX(1);} /* 1 = 100% */

        /* 기준 변경 */
        a:hover::after{transform-origin: left;}
        a:hover::before{transform-origin: right;}
</style>

👉 버튼 애니메이션

❗️ 헷갈리지 말 것

• transform = 도형의 변형 (translate 이동)
• transition = hover나 이벤트시 애니메이션
• animation = 이벤트 없이도 스스로 움직이는 애니메이션

display:table

반응형 작업 시 ul / li를 table로, table을 list로 변형해야 할 때가 있다. 그럴 때 유용하게 쓸 수 있는 것이 display:table; 이다.

• display: table; = table요소
• display: table-cell; = td

table 특징

• border: collapse = 선끼리 겹치는 현상을 막아줌
• vertical-align: middle = 세로 중앙정렬

<style>
	/* table을 list로  */
        table{display: block;}
        th,td{display: list-item;}
        
	/* ul,li를 table로 */
        ul{display: table; padding: 0; margin: 0; width:100%; border: collapse;}
        li{display: table-cell; padding: 0; margin: 0; height: 50px; vertical-align: middle;}
</style>