@charset "utf-8";

section {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
    margin: 50px;
    perspective: 400px; /* 원근감을 지정 */
}

section article {
    width: 100%;
    height: 100%;
    background: blue;
    opacity: 0.3;
}

section:nth-of-type(1) article {
    transform: rotateX(45deg);
}

section:nth-of-type(2) article {
    transform: rotateY(45deg);
}

section:nth-of-type(3) article {
    transform: translateZ(100px);
}

section:nth-of-type(4) article {
    transform: translateZ(-100px);
}

section:nth-of-type(5) article {
    transform: rotateY(120deg);
    transform-origin: center center;
}

section:nth-of-type(6) article {
    transform: rotateY(120deg);
    transform-origin: right center;
}