제이쿼리 질문드립니다. ㅠㅠ
본문
제가 css로 한바퀴 도는 이미지를 만들었는데 페이지 로딩되었을때 한번만 자동으로 이미지를 돌리고 싶은데 어떤 제이쿼리를 사용 해야 될까요?
<style>
.test_flip{width:351px;}
.container {
width: 351px;
height: 584px;
position: relative;
perspective: 500px;
-webkit-perspective: 500px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
#card span {
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#card span:hover {
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
transition-duration: 1.5s;
-webkit-transition-duration: 1s;
}
</style>
<script src="/js/jquery.flip.min.js"></script>
<script>
window.onload = function () {
$("#card").trigger('click');
$(".test_flip").flip({
axis:'y',
trigger:'click',
front:'.text_box',
back:'.text_box2'
});
};
$(document).ready(function(){
});
</script>
<div class="test_flip">
<div class="text_box">
<img src="/img/123.jpg">
</div>
<div class="text_box2"style="width:170px !important;"><img src="/img/123.jpg"></div>
</div>
<div class="container">
<div id="card">
<span><img src="/img/123.jpg"></span>
</div>
</div>
답변 2
위의 소스는 클릭시 혹은 마우스 오버시에 나타나는 애니메이션입니다
마우스 오버일때 위 소스대로 하면 떨림현상이 나타나고요
수정한다면
| 27 | #card span:hover { |
| 28 | transform: rotateY(360deg); |
| 29 | -webkit-transform: rotateY(360deg); |
위의 rotateY 대신 rotate 으로 바꾸시면 마우스 오버시 한바퀴 돌게 됩니다
하지만 질문의도가 페이지를 열었을때 자동으로 한바퀴만 돌고 멈추는 기능을 원하시는 거라면
위의 소스로는 안될거에요
구글링 하면 몊가지 팁이 나옵니다만
예를 들어
<body>
<div class="box"></div>
</body>
<style type="text/css">
/*처음 보여질 box의 모양과 색상을 잡아줍니다.*/
.box{ width:150px;height:150px;background: Crimson ;margin: 100px auto;border-radius:0%;
/*이 속성은 파이어폭스에서 애니메이션 모양의 깨짐방지*/
outline: 1px solid transparent;
animation:circle 0.5s 0s alternate;
/*★ 설명 ★
애니메이션 속성을 쭉 써주기 !! 어떻게 움직이고 , 이만큼의 시간을 줄것이고, 계속 반복할것인가...
-----------------------------
circle이라는 애니메이션 이름을 지정하고
0.5초간 진행합니다.
-----------------------------
*/
}
@keyframes circle {/* circle이라는 애니메이션 키프래임 만들기*/
0% { transform:rotate(0deg);)}
25% { transform:rotate(90deg);}
50% { transform:rotate(180deg);}
75% { transform:rotate(270deg);}
100% { transform:rotate(360deg);}
}
</style>
0%, 25%, 50%, 75%, 100% 4번에 맞춰 360도를 4등분해서 90도씩 적용하면
페이지 로딩되면 1바퀴 돌고 멈춥니다
animation:circle 0.5s 0.4s alternate; 에서 0.5s 는 0.5초간 1바퀴 도는것을 의미하며
뒤의 0.4s는 딜레이 시간을 의미합니다
보통
animation:circle 0.5s 0s alternate
으로 사용하기도 합니다
만일 무한 반복을 원한다면
animation:circle 0.5s 0s infinite alternate;
를 추가하면 됩니다
[아래 답변글에 대한 추가 설명]
이미지를 회전시키려면 아래 box 클래스값을 아래 처럼 해주면 됩니다
.box{ background:url('//img/123.jpg') center 0 repeat; width:100px; height:100px ;
animation:circle 0.5s 0.4s alternate; }
답변을 작성하시기 전에 로그인 해주세요.
