html - 以 Angular 6 旋转框架内的矩形图像

Question

我想像这样在一个相同大小的框架内旋转一个矩形图像:

<div style="border:1px solid #d3d3d3;width:208px;height:250px">
 <img style="width:208px;height:250px" src="https://www.webslake.com/w_img/t_i/lpw.png" [style.transform]="styles"> </div>

   <button type="button" class="btn btn-undo btn-lg" (click)="rotateImage('left')">

和旋转图像的按钮:

rotateImage(direction) {    
    if (direction === 'left') {
      this.rotationAmount = this.rotationAmount + -90;
    } else if(direction === 'right') {
      this.rotationAmount = this.rotationAmount + 90;
    }
    this.styles =  'rotate(' + this.rotationAmount + 'deg)';

  }

如何在不改变宽度和高度的情况下在 div 框架内进行旋转，因为如果我旋转 (new)width = old(height) 反之亦然，我希望在旋转过程中具有相同的宽度和高度.

Answer 1

我在样式中添加了计算顶部和左侧的逻辑:

rotateImage(direction: string) {

 if (direction === 'left') {
   let flag = this.width;
   this.width = this.height;
   this.height = flag;
   this.rotationAmount = this.rotationAmount + -90;
   if (this.rotationAmount == -360) {
    this.rotationAmount = 0;
   }
  console.log(this.rotationAmount);
   if (this.rotationAmount === -180 || this.rotationAmount === 0) {
     this.top = 0;
     this.left = 0;
   } else {
     this.top = (this.width-this.height)/2 * (-1); 
     this.left = (this.width-this.height)/2;
     console.log(this.top, this.left)
   }
} 

 else if(direction === 'right') {
   this.rotationAmount = this.rotationAmount + 90;
 }
 this.styles =  'rotate(' + this.rotationAmount + 'deg)';
}

这是 stackblitz 的链接 https://stackblitz.com/edit/angular-gz9zqs?embed=1&file=src/app/app.component.ts