介绍
@egjs/jquery-transform 是一个用于以 CSS3 Transform 形式变换，操纵 HTML 元素的 jQuery 插件。该插件支持在数据预览、游戏制作以及视觉效果等方面应用。本文将详细介绍如何使用该插件。
安装
使用以下命令可安装 @egjs/jquery-transform：
npm install @egjs/jquery-transform
基本用法
首先，加载 jQuery 和 @egjs/jquery-transform：
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="node_modules/@egjs/jquery-transform/release/jquery.transform.js"></script>
之后即可使用 transform() 方法对 HTML 元素进行变换。例如，对一个 div 元素应用 inital 状态的旋转、缩放和平移：
-- -------------------- ---- ------- ---- ----------- ------------------------------------------------------------- -------- ------------------------ ------- -- ------ --- -- -- --- ---------- --- -- -- -- --- ---------
接下来，我们对该元素进行变换。例如，在 1 秒内，按先后顺序依次以 45° 角度逆时针旋转、水平和竖直缩小为原来的一半、向右平移 100px：
-- -------------------- ---- ------- ---- ----------- ------------------------------------------------------------- -------- ------------------------ ------- ---------- ------ --- ---- -- ----- ---------- --- ---------- -- -- -- ------ ---------
此外，还可以使用 stopTransform() 方法停止变换。
参数说明
transform() 方法的可选参数如下：
rotate：旋转角度（默认：0deg）。scale：缩放比例，为带有x和y属性的对象（默认：{x: 1, y: 1})。translate：平移距离，为带有x和y属性的对象（默认：{x: 0, y: 0})。origin：原点（默认：null）。matrix：4x4 矩阵（默认：null）。
另外，transform() 方法还有两个可选参数：
duration：运动时间（以毫秒为单位，默认为 0，即没过渡效果）。easing：缓动方式，默认为 "ease-out"，其他值有 "linear" 和 "ease-in-out"。
示例
下面演示一些常用的效果。
翻转
-- -------------------- ---- -------
---- ----------- ------------------------------------------------------------ --------
--------
----------------------------- -
-------------------
------- ----------
-- -----
---
---------缩放
-- -------------------- ---- -------
---- ----------- ------------------------------------------------------------- --------
--------
----------------------------- -
-------------------
------ --- -- -- --
-- -----
---
---------平移
-- -------------------- ---- ------- ---- ----------- ------------------------------------------------------------- -------- -------- ------------------------------------ ---------- --- -- -- --- ------- -- -- --- --------------------------------- - ------------------------ --- ---------
结论
@egjs/jquery-transform 是一款非常方便而强大的 jQuery 插件，用于以 CSS3 Transform 形式变换和操纵 HTML 元素。学会使用该插件，对于数据预览、游戏制作以及视觉效果等方面都有很大的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcbb1b5cbfe1ea0612662