kadi Posted April 7, 2014 Share Posted April 7, 2014 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. [CODE]<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; ; 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; ; /* PUSH TO CIRCLE */ transform: translate(-150px); /* PUSH OUT OF CIRCLE */ ;}[/CODE] Link to comment Share on other sites More sharing options...
davej Posted April 8, 2014 Share Posted April 8, 2014 CSS3 can make things move and/or rotate but I don't think there is any way to detect a collision. Link to comment Share on other sites More sharing options...
Ingolme Posted April 8, 2014 Share Posted April 8, 2014 CSS can animate, but it's not a programming language, you will need to use Javascript and apply geometry. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now