PDA

View Full Version : onclick to move back and forth



kadi
04-07-2014, 06:59 PM
so how can i assign a button to move red ball back and forth to avoid collision from blue ball. if collided then the blue ball should stop rotating.






<div class="circle">
<div class="ball_blue"></div>
<div class="ball_red"></div>
</div>

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


@keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}

.circle {
border:1px solid grey;
position: relative;
width:300px;
height:300px;
margin:25px auto;
border-radius:50%;
}

.ball_blue {
width: 40px;
height: 40px;
position: absolute;
top:50%;
left:50%;
margin-top: -20px;
margin-left: -20px;
background:blue;
border-radius:50%;
font-size: 100px;
animation: rot 3s infinite linear;
}

.ball_red {
width: 20px;
height: 20px;
position: absolute;
background:red;
border-radius:50%;
/* INITIALLY CENTERED */
top:50%;
left:50%;
margin-top: -10px;
margin-left: -10px;
/* PUSH TO CIRCLE */
transform: translate(-150px);
/* PUSH OUT OF CIRCLE */
margin-left: -20px;
}