@charset "utf-8";

section {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
    margin: 50px;
}

section article {
    width: 100%;
    height: 100%;
    background: blue;
    opacity: 0.3;       /* 배경색의 불투명도 지정 */
}

section:nth-of-type(1) article {
    transform: scale(1.3);  /* 요소를 1.3배 확대 */
}

section:nth-of-type(2) article {
    transform: skewX(20deg);    /* 요소를 20도만큼 비틈 */
}

section:nth-of-type(3) article {
    transform: translateY(50px);    /* 요소를 50px만큼 오른쪽으로 이동 */
}

section:nth-of-type(4) article {
    transform: rotate(45deg);   /* 요소를 45도만큼 회전 */
}