egjs-rotate 是一个轻量级的 JavaScript 库，用于在 Web 应用程序中旋转元素。它支持各种响应式布局，并且可以平滑地旋转元素，同时保持良好的性能。
安装
你可以使用 npm 来安装 egjs-rotate：
npm install @egjs/rotate
然后，在你的应用程序中引入它：
import Rotate from "@egjs/rotate";
使用示例
下面是一个简单的示例，演示如何使用 egjs-rotate 旋转一个图片：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ----------
-------
------------ -
------ ------
------- ------
------- - -----
--------- ---------
-
------------ --- -
------ -----
------- -----
----------- --------
--------- ---------
---- --
----- --
-
--------
-------
------
---- --------------------
---- ------------ -------------------- -----------
------
--------
------ ------ ---- ---------------
----- ------- - -----------------------------------
----- ------- - --- --------------- -
------ ---
--------- ----
--------- ---
---
-------------------- -- ----- -- -- -
----------------------- - ----------------------
---
---------
-------
-------在这个示例中，我们首先创建了一个 div 元素作为图片的容器，并设置了一些样式。然后，在 JavaScript 中，我们通过 document.getElementById 方法获取到了图片元素，并创建了一个 Rotate 实例进行旋转操作。在 Rotate 构造函数中，我们指定了一些选项参数：
angle: 初始旋转角度为 45 度。minAngle: 最小旋转角度为 -90 度。maxAngle: 最大旋转角度为 90 度。
最后，我们通过 gesture.on("change", handler) 方法监听 change 事件，当用户对图片进行旋转操作时，会触发该事件，并传递一个包含当前旋转角度的对象。在回调函数中，我们将图片元素的 CSS 属性 transform 设置为 rotate(${angle}deg)，从而实现了图片的平滑旋转效果。
除了上述示例外，egjs-rotate 还支持其他功能，如在特定区域内捏合缩放、双指旋转等手势操作，具体可以参考官方文档。
总结
egjs-rotate 是一个简单易用的 JavaScript 库，可以帮助你在 Web 应用程序中实现元素旋转的功能。它支持各种响应式布局，并且可以平滑地旋转元素，同时保持良好的性能。在实际应用中，你可以结合自己的项目需求，灵活运用 egjs-rotate 提供的各种功能，以达到更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39270