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


Tags: javascript,php,jquery,html,css

Problem :

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.



Solution :

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>


    CSS Howto..

    Given an url, how could a script find what resources are loaded?

    How to have an image overlap the edge of a div

    How to make sidebar always visible in the Semantic UI

    How can I remove a bootstrap buttons hover effect?

    how to access the class css properties from an attribute directive associated with the same element

    How to add CSS reference link to local HTML files in folder?

    How are URLs handled inside the CSS file in CakePHP so they reference the correct location?

    How to select not first tr and not last td

    How to re-animate CSS3 animations on class change

    HTML CSS - How to put button at the center of my page

    Bootstrap glyphicon/nav bar showing popup window

    How to assign CSS properties to aside tag

    How to get a asp:Panel's CSS Class in code-behind after it has changed by CSS

    How can i make a div to slide in from right side to left?

    How to make show/hide div with a toggle using CSS?

    How to prevent line breaks in list items using CSS

    How can I remove this white space from a table?

    css: how to surround an image with two other images vertically centered around the first one?

    UI Challenge - how to draw “connectors” between elements?

    how to style this via css in Bootstrap

    How do you put in percentage based margin to a CSS grid?

    How to replace direct image calling with sprites, in JavaScript?

    How to change the dimensions of a div depending of a number extern to that div? jquery/css

    How can I avoid space while using pseudo-elements in multi-line markup?

    css - How to set fixed width of div that is display:inline

    How to change styling of a specific div onhover of another element when divs share an id

    How to center a banner and keep margin?

    how to center text AND have max width of 800px in CSS?

    How to stick a div when scrolled past 50% of the item?

    How to style 2 vertical jQuery UI Slider handles?