如何使用腳本旋轉(zhuǎn)圖像

　　1. 逆時(shí)針旋轉(zhuǎn)圖像， 2.自定義圖像變換原點(diǎn)， 3.旋轉(zhuǎn)圖像按鈕單擊，4。以增量方式旋轉(zhuǎn)映像。

　　要使用 JavaScript 旋轉(zhuǎn)圖像，請(qǐng)使用類似 的方法訪問圖像元素，然后將屬性設(shè)置為格式為 字符串，其中 是順時(shí)針旋轉(zhuǎn)角度(以度為單位)。getElementById()style.transform rotate({value}deg){value}

　　請(qǐng)考慮以下示例：

　　索引.html

　　下面介紹如何從 Java 腳本輕松旋轉(zhuǎn)圖像元素：#rotated

　　索引.js

　　這將是網(wǎng)頁上的結(jié)果：

　　首先，我們隨文檔一起訪問 DOM 元素對(duì)象。獲取元素 ById() 方法。

　　然后，我們使用對(duì)象的屬性從 JavaScript 設(shè)置元素的轉(zhuǎn)換 CSS 屬性。style.transform

　　我們可以指定旋轉(zhuǎn)之間的任何角度：-1-359

　　逆時(shí)針旋轉(zhuǎn)圖像

　　我們可以通過指定負(fù)角度沿逆時(shí)針方向旋轉(zhuǎn)圖像。

　　我們可以指定逆時(shí)針旋轉(zhuǎn)之間的任何角度和度。-1-359

　　自定義圖像變換原點(diǎn)

　　我們可以使用轉(zhuǎn)換原點(diǎn) CSS 屬性來設(shè)置圖像將旋轉(zhuǎn)的點(diǎn)。 ，這意味著元素將圍繞其中心點(diǎn)旋轉(zhuǎn)。transform-origincenter

　　在下面的示例中，我們將圖像順時(shí)針旋轉(zhuǎn) 90 度，就像我們?cè)诒疚牡牡谝粋€(gè)示例中所做的那樣。

　　但這次我們自定義了屬性，因此圖像元素在旋轉(zhuǎn)后最終位于不同的位置。transform-origin

　　旋轉(zhuǎn)圖像按鈕單擊

　　若要在單擊按鈕時(shí)旋轉(zhuǎn)圖像，請(qǐng)將事件處理程序函數(shù)分配給元素的屬性。onclickbutton

　　例如：

　　索引.html

　　此處，該函數(shù)用作事件處理程序。它包含用于旋轉(zhuǎn)圖像的邏輯，并在單擊按鈕時(shí)調(diào)用。rotateImage()click

　　索引.js

　　現(xiàn)在，單擊該按鈕時(shí)，圖像將順時(shí)針旋轉(zhuǎn)90度。

　　增量旋轉(zhuǎn)映像

　　我們可以通過將旋轉(zhuǎn)角度存儲(chǔ)在變量中并使用此變量來獲取和更新當(dāng)前角度，從而在按鈕單擊時(shí)增量旋轉(zhuǎn)圖像。許多圖像編輯應(yīng)用程序允許您以 90 度角度增量旋轉(zhuǎn)圖像。

　　索引.js