水平图像翻转[重复]答案

【问题标题】：Horizontal image flip [duplicate]水平图像翻转[重复]
【发布时间】：2019-11-26 12:39:55
【问题描述】：

我试图在按下按钮时水平翻转图像。

我写了一个每次按下按钮都会触发的函数。

handleClick(e) {
    e.preventDefault();


  }

  render() {
    return (
      <div
        className="image-root"
        style={{
          backgroundImage: `url(${this.urlFromDto(this.props.dto)})`,
          width: this.state.size + 'px',
          height: this.state.size + 'px'
        }}
        >
        <div>
          <button onClick={this.handleClick}><FontAwesome className="image-icon" name="arrows-alt-h" title="flip"/></button>
          <FontAwesome className="image-icon" name="clone" title="clone"/>
          <FontAwesome className="image-icon" name="expand" title="expand"/>
        </div>
      </div>
    );
  }
}

【问题讨论】：

你做了什么来翻转图像？
实际发生了什么？（没什么/奇怪的东西？）
一种解决方法是使用按钮上的 js 添加一个类，然后按此处进行操作：stackoverflow.com/questions/32875695/…
我有一个图片网格，每个都有 3 个按钮，其中一个是水平翻转它我设法在我使用的 .sass 文件中翻转所有这些 -> 使用 transform: scaleX （1），但是在.js文件中我无法理解在指定图片上按下按钮时该怎么做
so 添加 css 来翻转它.... 添加单个类名和 css 规则来翻转。

标签： javascript reactjs react-redux

【解决方案1】：

首先将所需的代码添加到一个CSS类中，如下所示，但不要将这个类添加到任何HTML元素中，因为它应该只在单击按钮时添加

CSS

.img-hor {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

让img1 成为您要翻转的图像的id，现在我们要添加这个额外的类来翻转它。为此，我们根据需要将这个js添加到按钮中

document.getElementById("img1").classList.toggle("img-hor");

Codepen 示例：https://codepen.io/anon/pen/rXNgVQ

【讨论】：