@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;
    transform: rotateY(0deg);
    /*transition-property: transform, opacity;*/
    /*transition-duration: 1s;*/
    /*transition-delay: 0s;*/
    /*transition-timing-function: cubic-bezier(.46, -0.64, .58, 1.39);*/
    /*  위의 네 줄은 아래 한줄과 같다.  */
    transition: all 1s cubic-bezier(.46, -.64, .58, 1.39) 0s;
}

section:hover article {
    transform: rotateY(45deg);
    background: red;
}