이전 목록 다음
채택완료

스크립트문으로 html ul>li태그 카드형뒤집기

qoqofh
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-05-07 (금) 10:28:33 2,037

스크립트문으로 html ul>li태그 카드형뒤집기를 구현하였는데, 조금 버벅거리는 현상이 나타납니다.

뭐라고 표현해야할지 모르겠는데.... 카드 모서리 부분에 마우스를 가져다대면 뒤집힐랑말랑?ㅋㅋㅋ 

하는 상황이여서요 ㅠㅠ 어디부분을 수정해야 할까요 ㅠㅠ?

Copy 
<script>
        $(document).ready(function(){
            $(".wr_main_left .left_wrap .contents li").mouseover(function(){
                $(this).css("transform","rotateY(180deg)");
            });
            $(".wr_main_left .left_wrap .contents li").mouseout(function(){
                $(this).css("transform","rotateY(0deg)");
            });
        });
    </script>

 

 

 

 

<div class="wr_main_left">
<!--                   <div class="left_top"></div>-->
                    <div class="left_wrap">
                        <h2 class="left_title">타이틀</h2>
                        <ul class="contents">
                           <li>
                                   <div class="front">
                                       <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=calendar&year=2021&month=3"><img src="img/month3.png" alt="march"></a>
                                   </div>
                                   <div class="back">
                                       <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=calendar&year=2021&month=3"><img src="img/month3_b.png" alt="march"><span>123</span></a>
                                   </div>
                           </li>
                           <li>
                                   <div class="front">
                                       <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=calendar&year=2021&month=4"><img src="img/month4.png" alt="march"></a>
                                   </div>
                                   <div class="back">
                                       <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=calendar&year=2021&month=4"><img src="img/month4_b.png" alt="march"><span>345달</span></a>
                                   </div>
                           </li>
                        </ul>
                    </div>
                </div>
스크립트 카드 뒤집기
|

답변 3개 / 댓글 2개

채택된 답변
+20 포인트
병병원에서일해요
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-05-07 (금) 10:35:01

rotate로 돌아가면서 li의 영역밖으로 마우스가 나가게 될겁니다

개발자도구로보면 rotate되면서 영역이 어떻게 움직이는지 보일거에요

mouseout의 시점을 조정해보세요

답변에 대한 댓글 1개

qoqofh
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-05-07 (금) 10:39:00
그부분을

$(".wr_main_left .left_wrap").mouseout(function(){
$(this).find("li").css("transform","rotateY(0deg)");
});

이렇게 조정했는데, 조금 나아지긴했는데, 버벅거리는 부분은 어떻게 못하겠네요 ㅠㅠ
병병원에서일해요
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-05-07 (금) 11:04:19

스타일이없어서 구현을 못해보겠네요

코드펜같은곳에 소스랑 스크립트 올려서 한번 공유해보세요

아니면 구글에 플립효과 검색해보세요

답변에 대한 댓글 1개

qoqofh
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-05-07 (금) 11:06:25
[code]
.wr_main_left .left_wrap .contents{
clear: both;
}
.wr_main_left .left_wrap .contents li{
width: 32%;
display: inline-block;
margin: 1.5% 1% 1.5% 0;
box-shadow: 2px 2px 7px rgba(106, 106, 106, 0.35);
position: relative;
transform-style: preserve-3d;
transition: all 0.5s;

}
/*.wr_main_left .left_wrap .contents li:hover {
transform: rotateY(180deg);
}*/
.left_wrap .contents li .front {
width: 100%;
z-index: 4;
transform: rotateY(0deg);

}
.left_wrap .contents li .back {
width: 100%;
height: inherit;
position: absolute;
left: 0;
top: 0;
z-index: 5;
transform: rotateY(180deg);
}
.left_wrap .contents li .back a{
position: relative;
width: 100%;
height: 100%;
display: block;

}
.left_wrap .contents li .back a span{
position: absolute;
width: 90%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
z-index: 3;
text-align: center;
font-size: 1.4em;
font-weight: bold;
}
.left_wrap .contents li .back img{
filter:brightness(0.7);
}
.wr_main_left .left_wrap .contents li:nth-child(3n){
margin-right: 0;
}
.left_wrap .contents li img{
width: 100%;
margin: 0;
font-size: 0;
}

.wr_main_right {
height: 100%;
/*width: 50%;*/
flex-grow: 1;
background-color: #fff;
}

[/code]

스타일은 이런식으로 되어있습닏 ㅏㅠ

답변을 작성하려면 로그인이 필요합니다.