Specifically, I am having trouble getting the block to rotate properly.
Currently, the block only rotates once when clicked, but I want it to rotate each time I click in both directions.
Any suggestions on how to achieve this?
var now = 10;
$('.left').click(function() {
$(".d").css('transform', 'rotate(' + now + 'deg)');
});.r {
width: 200px;
height: 200px;
border: 20px solid;
border-radius: 50%;
}
.d {
width: 200px;
height: 200px;
border: 20px solid blue;
border-radius: 50%;
}
.wrapper {
width: 230px;
}
.parent {
width: 240px;
height: 240px;
position: relative;
}
.r,
.d {
position: absolute;
}
.d {
border-right-color: transparent;
border-top-color: transparent;
transform: rotate(45deg);
}
.btns {
display: table;
margin: 10px auto;
}
button {
margin-left: 10px;
}<div class="wrapper">
<div class="parent">
<div class="r"></div>
<div class="d"></div>
</div>
<div class="btns">
<button class="left">+</button>
<button class="right">-</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Originally, I wanted to create a control similar to the one shown in the screenshot.
However, due to my limited knowledge of JS, I opted for an HTML and CSS + jQuery approach.
I considered using SVG but wasn't sure how to implement the necessary changes.
I appreciate any assistance you can provide!