Rotating images in Angular 4 by intervals of 45 degrees

Question

Rotating images in Angular 4 by intervals of 45 degrees

I have an image and two buttons that are supposed to rotate the image either 45 or -45 degrees.

<div>
    <img src="/assets/img1.png">
</div>
<div>
    <button type="submit">rotate left 45</button>
    <button type="submit">rotate right 45</button>
</div>

Is there a way to create a function that can apply a CSS transform rotate to this image? The rotation should occur in increments of 45 degrees in either direction, continuously rotating regardless of how many times the user clicks on the button.

css angular image rotation degrees

Answer 1

Answer №1

To update the CSS transform property of elements, you can simply click on them.

let rotationAmount = 0;

function adjustRotation(direction) {
  rotationAmount += direction == 'left' ? -45 : 45;
  
  document.querySelector('#image').style.transform = `rotate(${rotationAmount}deg)`;
}

#image {
  height: 100px;
  width: 100px;
}

.button-wrapper {
  margin-top: 30px;
}

<div>
    <img id="image" src="">
</div>
<div class="button-wrapper">
    <button type="submit" onclick="adjustRotation('left')">rotate left 45</button>
    <button type="submit" onclick="adjustRotation('right')">rotate right 45</button>
</div>

Answer 2

To update the CSS transform property of elements, you can simply click on them.

let rotationAmount = 0;

function adjustRotation(direction) {
  rotationAmount += direction == 'left' ? -45 : 45;
  
  document.querySelector('#image').style.transform = `rotate(${rotationAmount}deg)`;
}

#image {
  height: 100px;
  width: 100px;
}

.button-wrapper {
  margin-top: 30px;
}

<div>
    <img id="image" src="">
</div>
<div class="button-wrapper">
    <button type="submit" onclick="adjustRotation('left')">rotate left 45</button>
    <button type="submit" onclick="adjustRotation('right')">rotate right 45</button>
</div>

Rotating images in Angular 4 by intervals of 45 degrees

Answer №1

Similar questions

Having issues with CSS list hovering functionality in Google Chrome

Managing unpredictable fields within a TypeScript interface Let me known if you need further assistance

What is the best way to add a div to the bottom of a grid layout?

Using the position property of relative on a DIV element causes a gap to appear between the DIV and the next

Failure to apply Bootstrap Stylesheet

What is the proper way to tap into the features provided by DefinitelyTyped in typescript?

Listening for combinations of keys pressed using HostListener

Scrolling through four limited list items automatically

Encountering an issue with Auth0 and Angular2: "The supplied parameters do not match any signature of call target."

While attempting to make my div responsive, it unexpectedly became stuck to the navbar

Is it possible to assign a variable to an Ionic datetime input property?

Are the references to clip-path: path() on MDN and other sources inaccurate?

Struggling to extract data using Scrapy and facing difficulties with the css selector

Utilizing three.js to import and render SVG paths from images

Struggling with Primeng's KeyFilter functionality?

Updated the application to Angular 6 but encountered errors when attempting to run npm run build --prod. However, running the command npm run build --env=prod was executed without any issues

Navigating through a diagonal path

I'm experiencing some unexpected behavior in JavaScript when I try to apply style changes using JavaScript. Is it possible that transitions are not occurring in both cases as expected?

Styling the alignment of category menu columns using CSS

Design the layout of a table by styling alternating columns and using colspan cells