[Css] 호버하면 앞 뒤로 회전하는 카드 만들기 🚩

css

[Css] 호버하면 앞 뒤로 회전하는 카드 만들기 🚩

lemonarr🍋 2023. 10. 16. 23:55

카드를 호버하면 앞 뒤로 다른 이미지가 보여지는 것을 구현해 보았습니다.😊😀

코드정리🤞

Html

<body>
    
    <div id="wrap">
        <ul>
            <li>
                <!--사용성 높이는 방법: 카드 호버 오류 한번 더 감싸주면 된다!-->
                <div class="flip">
                <div class="front">Card front</div>
                <div class="back">Card back</div>
                </div>
            </li>
        </ul>
    </div>
    
</body>

Css

<style>
*{
    margin:0;
    padding:0;
    list-style-type: none;
}
#wrap{
    width:100%;
    height:100%;
    margin: 200px 700px;
}
li{
    width:200px;
    height:300px;
}
.flip{
    position: relative;
    width:200px;
    height:300px;
    margin:200px auto;
    transform-style: preserve-3d;
    transition: all 1s ease;
    background-color: aqua;
    /*글씨에 볼드 + 가운데 정렬 적용*/
    font-weight: bold;
    text-align: center;
}
.flip:hover {
    width:200px;
    transform: rotateY(180deg);
    transition: all 1s ease;
}
.flip > div {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: absolute;
}
.front {
    background-color: rgb(144, 0, 255);
    /*background: url(/img/10.png);*/
}
.back {
    background-color: rgba(255, 255, 255, 0.7);
    /*너무 딱 붙이면 돌아갈 때 오류가 생길 수 있음.*/
    transform: rotateY(180deg) translate3d(0,0,3px);
    /*카드에 무늬 이미지 적용*/
    background: url(/img/bg_card.png);
}
</style>

동작 원리

Html에

앞과 뒤 카드를 만듭니다.

Css에

뒤 카드에만 180도 회전을 시켜서 양면 카드처럼 만듭니다.

Css에

양면 카드를 전체 감싸는 태그에 호버를 하면,

Y축으로 180도 회전 시킵니다.

(매끄러운 애니메이션을 위해 transition all 1s ease로 설정해주시는 것은 필수!)

Q. 양면 카드에 카드를 회전시켜야 하니 Y축으로 180도 회전하는 값을 설정해주는 것은 알겠는데,

왜 추가로 Translate3d(0,0,3px); Z축 값을 주었나요? 🤓?

라고 물으신다면.. 그 이유는

앞 뒤로 딱 붙이는 경우 양면 카드가 돌아갈 때 오류가 날 수 있어 z값으로 3만큼만 띄워준 것입니다..

서로 겹쳐지지 않도록 하기 위함입니다!

+꿀팁

앞과 뒤 카드를 한번 감싸주고 <div id ="wrap">으로 그 위에 호버 이벤트를 주면

카드호버 시에 발생하는 애니메이션 오류를 최소화할 수 있습니다. 👍

양면 카드 호버 이벤트 구현하기.. 참 쉽죠?