如何使用 HTML/CSS/JS 旋转图像？

Question

我正在尝试以选定的角度（0、90、180、270）旋转图像（更准确地说是流媒体视频）。

我的代码不起作用，我想我离解决方案不远了。

完整代码源自此 ESP32-CAM 示例。
https://randomnerdtutorials.com/esp32-cam-video-streaming-web-server-camera-home-assistant/

/* CSS ============================= */

@media (min-width: 800px) and (orientation:landscape) {
    #content {
        display:flex;
        flex-wrap: nowrap;
        align-items: stretch
    }

    figure img {
        z-index: 0;
        display: block;
        max-width: 100%;
        max-height: calc(100vh - 40px);
    }
}

/* HTML ============================= */

    <div class="input-group" id="rotation-group">
        <label for="rotation">Rotation</label>
        <select id="rotation" class="default-action">
            <option value="0" selected="selected">0°</option>
            <option value="90deg">90°</option>
            <option value="180deg">180°</option>
            <option value="-90deg">-90°</option>
        </select>
    </div>

/* JS ============================= */
document.addEventListener('DOMContentLoaded', function (event) {


  const view = document.getElementById('stream')
  const viewContainer = document.getElementById('stream-container')

  const startStream = () => {
    view.src = `${streamUrl}/stream`
    show(viewContainer)
    streamButton.innerHTML = 'Stop Stream'
  }

  const stopStream = () => {
    window.stop();
    streamButton.innerHTML = 'Start Stream'
  }


  // Rotation
  var rot_value = document.getElementById('rotation').value

  //FIXME doesn't work
  view:transform.rotation(rot_value)

Answer 1

我不知道流式视频是否与普通的 HTML5 视频相同，但如果是，这里有一些 css 可以旋转带有变换的视频。 这也适用于任何其他普通 DOM 元素，因此图像也适用于此。

video{
  -moz-transform:rotate(20deg);
  -webkit-transform:rotate(20deg);
  -o-transform:rotate(20deg);
  -ms-transform:rotate(20deg);
  transform:rotate(20deg);
}

你可以让它在指定的时间内发生，如下所示：

video {
  transition: all 0.5s linear;
}

如果您还需要什么，请发表评论