[英]How to rotate image with HTML/CSS/JS?
I'm trying to rotate an image (more exactly a streamed video) with a selected angle (0, 90, 180, 270).我正在尝试以选定的角度(0、90、180、270)旋转图像(更准确地说是流媒体视频)。
My code doesn't work, and I suppose I'm not very far from the solution.我的代码不起作用,我想我离解决方案不远了。
Full code is derived from this example for an ESP32-CAM.完整代码源自此 ESP32-CAM 示例。
https://randomnerdtutorials.com/esp32-cam-video-streaming-web-server-camera-home-assistant/ 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)
I dont know if a streamed video is the same as a normal HTML5 video, but if it is, heres some css to rotate a video with transforms.我不知道流式视频是否与普通的 HTML5 视频相同,但如果是,这里有一些 css 可以旋转带有变换的视频。 This also works for any other normal DOM element, so images will work with this too.这也适用于任何其他普通 DOM 元素,因此图像也适用于此。
video{
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
-ms-transform:rotate(20deg);
transform:rotate(20deg);
}
You can make it happen over a specified amount of time like so:你可以让它在指定的时间内发生,如下所示:
video {
transition: all 0.5s linear;
}
If you need anything else drop a comment如果您还需要什么,请发表评论
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.