如何在AngularJs中旋转图像

发布时间：2020-12-17 06:53:19 所属栏目：安全来源：网络整理

导读：这是我的代码：如何在元素框中单击时仅旋转带有角度的svg-arrow？ md-card class="header" style="margin: 0 0 4px 0;" ng-mousedown="toggleCollapse('source')" md-card-content layout="row" layout-align="start center" img src="../assets/icons/cd-ic

这是我的代码：如何在元素框中单击时仅旋转带有角度的svg-arrow？

<md-card class="header" style="margin: 0 0 4px 0;" ng-mousedown="toggleCollapse('source')">
  <md-card-content layout="row" layout-align="start center">
    <img src="../assets/icons/cd-icon-arrow.svg" class="buildrag-toggle">
    <h2 class="md-title no-top-margin no-bottom-margin" flex style="padding-left: 10px;">Data</h2>
    <md-button class="md-icon-button header-button" ng-mousedown="addDataSource($event)">
      <md-icon>add_circle_outline</md-icon>
    </md-button>
  </md-card-content>
</md-card>

Here is my button

解决方法

单击按钮时,使用ng-class切换类.然后在css中使用此类来旋转图像.

<md-card class="header" style="margin: 0 0 4px 0;" ng-mousedown="toggleCollapse('source')">
  <md-card-content layout="row" layout-align="start center">
    <img src="../assets/icons/cd-icon-arrow.svg" ng-class="{'rotate': rotateImg}" class="buildrag-toggle">
    <h2 class="md-title no-top-margin no-bottom-margin" flex style="padding-left: 10px;">Data</h2>
    <md-button class="md-icon-button header-button" ng-mousedown="addDataSource($event)" ng-click="rotateImg = !rotateImg">
      <md-icon>add_circle_outline</md-icon>
    </md-button>
  </md-card-content>
</md-card>


.rotate {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome,Safari,Opera */
    transform: rotate(90deg);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!