Question

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

我编写了一个函数，该函数在每次按下按钮时触发。

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>
    );
  }
}

Answer 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添加到按钮中

JS

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

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

水平图像翻转

1 个答案: