I made a box in css and what i want that box to do is basically spin. However, I need the slider to control the speed of the box. I dont know why it doesnt work. Can someone help me please?
This is my html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="as4.css" />
<script type="text/javascript" src="as4.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="box">
<p id="text">Use the slider to control speed of me!</p>
</div>
<div id="control">
<input id="controlo" type="range" min="10" max="50" step="5" value="25" />
</div>
</body>
</html>
This is my Javascript
var cur = 0;
function doit() {
var speed = +$("#controlo").val();
cur = (cur + speed);
$("#box").css("-webkit-transform", "rotate(" + cur + "deg)");
}
setInterval(doit, 100);
And this is my CSS
body{
text-align:center;
}
#box{
display:block;
width:150px;
margin:150px auto;
padding:15px;
text-align:center;
border:7px solid blue;
background:red;
-webkit-transition: -webkit-transform 1.5s linear;
}
.eg {
-webkit-transform: rotate(360deg);
}