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