[HTML] 입체적인 애니매이션 표현하기

    z-index: n;

 

position을 같이 사용해야 한다

@charset "utf-8";

body {
    height: 100vh;
    background-color: cadetblue;
}

.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.wrap div {
    width: 400px;
    height: 300px;
    padding: 20px;
    perspective: 1000px;
    position: relative;
}

.wrap div img {
    width: 100%;
    display: block;
}

.wrap div .front {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    transform-style: preserve-3d;
    transition: all 1s;
    transform: rotate(0deg);
    backface-visibility: hidden;
}

.wrap .hover1:hover .front {
    transform: rotateY(180deg);

}
.wrap .hover2:hover .front {
    transform: rotateX(180deg);

}

.wrap div .back {
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    transition: all 1s;

    backface-visibility: hidden;
}
.wrap .hover1 .back {transform: rotateY(-180deg);}
.wrap .hover2 .back {transform: rotateX(-180deg);}

.wrap .hover1:hover .back {
    transform: rotateY(0deg);
}
.wrap .hover2:hover .back {transform: rotateX(0deg);}


.wrap div figure figcaption {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateZ(100px);
    background-color: rgba(255, 255, 255, 0.6);
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    backface-visibility: hidden;

}

.wrap div figure figcaption h3 {
    font-weight: bold;
}

.wrap div figure figcaption p {
    white-space: nowrap;
}

animation: bar 2s ease-in-out;
이름 시간 속도 반복횟수

linear : 일정한 속도로 움직이게 해줌
ease : 천천히 시작해서 빨리 끝나는 명령어
ease-in : 천천히 시작
ease-out : 천천히 끝남
ease-in-out : 천천히 시작해서 중간에 빨랐다가 천천히 끝는 명령어

 

        @keyframes bar {
            0% {
                transform: rotate(0deg);
                height: 0;
            }

            25% {
                transform: rotate(0deg);
                height: 400px;
            }

            75% {
                transform: rotate(180deg);
                height: 400px;
            }

            100% {
                transform: rotate(180deg);
                height: 0;
            }
        }