Rotation in react application - css

Question

I am trying to make a game where I have to move the plane in circular motion. However, when it reaches 90 degree or certain angle it still points in same direction as it is still image. I want to update the position on a circle with the state of react but image should also move and not point in same direction. aeroplane move circular
Currently the head is in east direction, at 0 degree. Now if the react state has value 90 degree i want it to move on this circle 90 degree but also now point upwards in north direction . Anyhelp?
Yes I tried it but does not seem to be working. I was using canvas earlier.....................
class Louie extends Component {
constructor(props) {
super(props);
this.update = this.update.bind(this);
this.rotateImage = this.rotateImage.bind(this);
}
componentDidMount() {
this.props.dispatch(getStats());
this.canvas = this.refs.canvas;
this.ctx = this.canvas.getContext("2d");
this.image = new Image();
this.image.src = require("../../Images/louie-front.png");
this.image.id = "lpl-head";
this.image.style.transform = "rotate(90deg)";
this.camera = {};
this.camera.x = 0;
this.camera.y = 0;
this.scale = 1.0;
this.obj = [];
this.t = {};
this.t.angle = Math.random() * Math.PI * 2; //start angle
this.t.radius = document.getElementById("louie-canvas").offsetHeight - 100;
this.t.x = Math.cos(this.t.angle) * this.t.radius; // start position x
this.t.y = Math.sin(this.t.angle) * this.t.radius; //start position y
this.t.circumference = this.t.radius * 2 * Math.PI; //curcumfrence
this.t.start = Date.now();
this.obj.push(this.t);
this.draw();
}
draw = () => {
this.update();
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.save();
this.ctx.translate(
0 - (this.camera.x - this.canvas.width / 2),
0 - (this.camera.y - this.canvas.height / 2)
);
this.ctx.scale(this.scale, this.scale);
this.ctx.fillStyle = "blue";
for (var i = 0; i < this.obj.length; i++) {
this.ctx.beginPath();
this.ctx.arc(0, 0, this.obj[i].radius, 0, Math.PI * 2);
this.ctx.lineWidth = 5;
this.ctx.strokeStyle = "#949494";
this.ctx.shadowBlur = 15;
this.ctx.shadowColor = "#080808";
this.ctx.shadowOffsetX = 10;
this.ctx.shadowOffsetY = 5;
this.ctx.stroke();
this.ctx.drawImage(
this.image,
this.obj[i].x - (window.innerWidth * 4) / 100,
this.obj[i].y - (window.innerWidth * 3) / 100,
(window.innerWidth * 8) / 100,
(window.innerHeight * 10) / 100
);
}
this.ctx.fillStyle = "#ab377a";
this.ctx.beginPath();
this.ctx.arc(0, 0, 10, 0, 2 * Math.PI);
this.ctx.closePath();
this.ctx.fill();
this.ctx.restore();
requestAnimationFrame(this.draw);
};
update = () => {
for (var i = 0; i < this.obj.length; i++) {
var angle = this.props.headDegree;
this.obj[i].x = this.obj[i].radius * Math.cos((angle * Math.PI) / 180);
this.obj[i].y = this.obj[i].radius * Math.sin((angle * Math.PI) / 180);
}
};
rotateImage = (angle) => {
this.image.style.transform = `rotateZ(${angle * 3}deg)`;
};