Akash Nil Akash Nil - 4 months ago 12
jQuery Question

How to design multiple time clock wise rotation of a image in css

I want to design a soft button for speed control of a servo through webpage. For this i wand to design a knob which will rotate with mouse click and control speed.

program

<!DOCTYPE html>
<html>
<head>
<script>
var servoPosition = 1;
servo = document.getElementById('servo');
servo.onclick = function(){
if(servoPosition == 4){
servoPosition = 1;
}
else {
servoPosition++;
}
servo.className = 'rotate position' + servoPosition;
}
</script>
<style>
.back{
position: relative;
top: 0;
left: 0;
}

.rotate {
top: 30px;
left:15px;
position: absolute;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
outline: 0;
}

#servo{
border-radius: 50%;
background-color: gold;
width: 200px;
height: 200px;
}
#servo:after{
content: "";
position: absolute;
left:45%;
top: 5%;
width:10%;
height:10%;
background-color: black;
border-radius: 50%;
}
.position1{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
.position2{
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
.position3{
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.position4{
-webkit-transform:rotate(270deg);
transform: rotate(270deg);
}
</style>
</head>
<body>
<div class="rotate" id="servo"></div>
</body>
</html>


what's wrong with this code?? it creates a knob like structure but did not rotate.

Answer

how about this?

var servoPosition = 1;
$('#servo').click(function(){
  $('#servo').removeClass('position' + servoPosition);
  if(servoPosition == 4){
    servoPosition = 1;
  }
  else {
    servoPosition++;
  }
  $('#servo').addClass('position' + servoPosition);
})
.back{
  position: relative; 
  top: 0;
  left: 0;
}

.rotate {
  top: 30px;
  left:15px;
  position: absolute; 
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  outline: 0;
}

#servo{
  border-radius: 50%;
  background-color: gold;
  width: 200px;
  height: 200px;
}
#servo:after{
  content: "";
  position: absolute;
  left:45%;
  top: 5%;
  width:10%;
  height:10%;
  background-color: black;
  border-radius: 50%;
}
.position1{
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
}
.position2{
  -webkit-transform:rotate(90deg);
  transform:rotate(90deg);
}
.position3{
  -webkit-transform:rotate(180deg);
  transform:rotate(180deg);
}
.position4{
  -webkit-transform:rotate(270deg);
  transform: rotate(270deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotate" id="servo"></div>

var servoPosition = 1;
servo = document.getElementById('servo');
servo.onclick = function(){
  if(servoPosition == 4){
    servoPosition = 1;
  }
  else {
    servoPosition++;
  }
  servo.className = 'rotate position' + servoPosition;
}
.back{
  position: relative; 
  top: 0;
  left: 0;
}

.rotate {
  top: 30px;
  left:15px;
  position: absolute; 
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  outline: 0;
}

#servo{
  border-radius: 50%;
  background-color: gold;
  width: 200px;
  height: 200px;
}
#servo:after{
  content: "";
  position: absolute;
  left:45%;
  top: 5%;
  width:10%;
  height:10%;
  background-color: black;
  border-radius: 50%;
}
.position1{
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
}
.position2{
  -webkit-transform:rotate(90deg);
  transform:rotate(90deg);
}
.position3{
  -webkit-transform:rotate(180deg);
  transform:rotate(180deg);
}
.position4{
  -webkit-transform:rotate(270deg);
  transform: rotate(270deg);
}
<div class="rotate" id="servo"></div>