스크립트문으로 html ul>li태그 카드형뒤집기
본문
스크립트문으로 html ul>li태그 카드형뒤집기를 구현하였는데, 조금 버벅거리는 현상이 나타납니다.
뭐라고 표현해야할지 모르겠는데.... 카드 모서리 부분에 마우스를 가져다대면 뒤집힐랑말랑?ㅋㅋㅋ
하는 상황이여서요 ㅠㅠ 어디부분을 수정해야 할까요 ㅠㅠ?
<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
rotate로 돌아가면서 li의 영역밖으로 마우스가 나가게 될겁니다
개발자도구로보면 rotate되면서 영역이 어떻게 움직이는지 보일거에요
mouseout의 시점을 조정해보세요
그부분을
$(".wr_main_left .left_wrap").mouseout(function(){
$(this).find("li").css("transform","rotateY(0deg)");
});
이렇게 조정했는데, 조금 나아지긴했는데, 버벅거리는 부분은 어떻게 못하겠네요 ㅠㅠ
스타일이없어서 구현을 못해보겠네요
코드펜같은곳에 소스랑 스크립트 올려서 한번 공유해보세요
아니면 구글에 플립효과 검색해보세요
.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;
}
스타일은 이런식으로 되어있습닏 ㅏㅠ
답변을 작성하시기 전에 로그인 해주세요.
