Javascript 以角度悬停时随机旋转图像？

我正在建立一个照片库，并试图使图像在悬停时旋转，但我在将值从TypeScript传递到CSS时遇到问题

HTML

<div class="back">
   <div class="row">
      <div class="column">
         <img src="https://images.unsplash.com/photo-1558981359-219d6364c9c8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583585635793-0e1894c169bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=913&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583531172005-814191b8b6c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583426573939-97d09302d76a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583532452513-a02186582ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583445013765-46c20c4a6772?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" style="width:100%">
      </div>
      <div class="column">
         <img src="https://images.unsplash.com/photo-1583531172005-814191b8b6c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583426573939-97d09302d76a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583532452513-a02186582ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583445013765-46c20c4a6772?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1558981359-219d6364c9c8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583585635793-0e1894c169bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=913&q=80" style="width:100%">
      </div>
      <div class="column">
         <img src="https://images.unsplash.com/photo-1583532452513-a02186582ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583445013765-46c20c4a6772?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583531172005-814191b8b6c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583426573939-97d09302d76a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1558981359-219d6364c9c8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583585635793-0e1894c169bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=913&q=80" style="width:100%">
      </div>
      <div class="column">
         <img src="https://images.unsplash.com/photo-1583426573939-97d09302d76a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1558981359-219d6364c9c8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583585635793-0e1894c169bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=913&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583532452513-a02186582ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583445013765-46c20c4a6772?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583531172005-814191b8b6c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80" style="width:100%">
      </div>
   </div>
</div>

TypeScript

export class PhotosComponent implements OnInit {

  random = Math.random(); //Trying to pass this into CSS

  constructor() { }

  ngOnInit(): void {
  }

}

我曾尝试使用[ngStyle]在HTML中对其进行修改，但据我所知，旋转无法以这种方式更改

---

jsiddle链接：

在typescript中尝试使用以下代码将其与css类链接：

常量元素=document.getElementById（“myDIV”）；

---

元素.classList.add（“myClass”）

在typescript中尝试使用以下代码将其与css类链接：

常量元素=document.getElementById（“myDIV”）；

---

元素.classList.add（“myClass”）

基本上，CSS代码是静态的，因此您不能在运行时更改CSS中的值，除非您要动态更新CSS。 但是，如果您在CSS中定义图像并将类分配给它们（'class1'，'class2'，等等），您将能够使用一个随机数将它们切换到您定义的类。生成一个随机数0-10并与“类”连接

---

您需要使用@HostListener I quess将其连接到mouseover事件。

基本上，CSS代码是静态的，因此您不能在运行时更改CSS中的值，除非您要动态更新CSS。 但是，如果您在CSS中定义图像并将类分配给它们（'class1'，'class2'，等等），您将能够使用一个随机数将它们切换到您定义的类。生成一个随机数0-10并与“类”连接

您需要使用@HostListener I quess将其连接到mouseover事件。

您可以使用

//in .ts
rotate(){
   return {transform:'rotate('+Math.random()*360+'deg)',
           'transform-origin':'50% 50%'}
}
//in .html
<img src="https://picsum.photos/200/300" [ngStyle]="style" 
  (mouseout)="style=null" 
  (mouseover)="style=random()">

//in.ts
轮换{
返回{transform:'rotate（'+Math.random（）*360+'deg'），
“转换原点”：“50%50%”
}
//in.html

或

random（）{
返回Math.random（）*360+'deg'
}
//和in.html

如果要更改图像的“旋转”。但实际上，您应该将代码放在一个*ngFor（或两个）中，以使事情更容易处理—这不是实践—并使用一系列“旋转”或类似的方法

//in .ts
rotate(){
   return {transform:'rotate('+Math.random()*360+'deg)',
           'transform-origin':'50% 50%'}
}
//in .html
<img src="https://picsum.photos/200/300" [ngStyle]="style" 
  (mouseout)="style=null" 
  (mouseover)="style=random()">

//in.ts
轮换{
返回{transform:'rotate（'+Math.random（）*360+'deg'），
“转换原点”：“50%50%”
}
//in.html

或

random（）{
返回Math.random（）*360+'deg'
}
//和in.html

---

如果要更改图像的“旋转”。但是实际上，你应该把你的代码放在一个*ngFor（或两个）中，以使事情更容易处理——这不是实践——并使用一个“旋转”数组或类似的数组

这并不能解决如何将随机数放入CSS类的问题这并不能解决如何将随机数放入CSS类的问题

random(){
  return Math.random()*360+'deg'
}

//and in .html
<img src="https://picsum.photos/200/300" [ngStyle]="{transform:'rotate('+rotation+')'}"
  (mouseout)="rotation=null" 
  (mouseover)="rotation=random()">