使用 JavaScript 旋轉影象

Shraddha Paghdar 2022年5月10日
使用 JavaScript 旋轉影象

旋轉 HTML 元素是使用 CSS 執行的常見要求。CSS 提供了一個轉換屬性,你可以使用它來完成此任務。在本文中,我們將學習如何使用 JavaScript 旋轉影象。

使用 CSS 轉換使用 JavaScript 旋轉影象

CSS 變換屬性允許你旋轉、縮放、傾斜或移動元素。改變 CSS 視覺格式模型的座標空間。如果屬性的值不是 none,則建立堆疊上下文。在這種情況下,元素充當容器塊,其位置根據其包含的元素設定為 position: fixedposition: absolute

轉換屬性可以指定為 none 關鍵字或一個或多個 transform 函式。如果 perspective() 是幾個函式值之一,它必須首先出現。

語法:

transform: none;
transform: translateX($Xpx) rotate($Ydeg) translateY($Zpx);

當要應用一個或多個 CSS 變換函式時,變換值是 transform-function。變換函式從左到右相乘。從右到左的複合,有效地應用了變換。在上面的語法中,我們使用 translateX,它水平翻譯具有特定畫素的元素,translateY,它垂直翻譯具有特定畫素的元素,以及 rotate,它圍繞一個特定角度旋轉元素二維平面上的固定點。

none 表示不應應用任何轉換。有關詳細資訊,請參閱 transform 文件。

<input id="button" type="button" value="Rotate">
<div id="img_container">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image">
<div>
let angle = 0,
img = document.getElementById('img_container');
document.getElementById('button').onclick = function() {
  angle = (angle + 90) % 360;
  img.className = "rotate" + angle;
}
#img_container.rotate90 {
  width: 100px;
  height: 820px
}
#image {
  transform-origin: top left;
  -webkit-transform-origin: top left;
}
#img_container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
}

在上面的程式碼中,我們建立了一個容器,每次使用者點選旋轉按鈕時,我們將當前角度加 90 度,取 360 度的模數。一旦找到最終角度,我們就可以新增其屬性已使用 CSS 宣告的預定義類。

該示例僅顯示 90 度旋轉,但你可以將其定義為任何角度,例如 45 度或 105 度等。上面程式碼的輸出如下所示:

之前使用 css 在 JS 中旋轉影象

之後使用 css 在 JS 中旋轉影象

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相關文章 - JavaScript Image