简介
egjs-jquery-transform 是一个基于 jQuery 的插件，用于实现 CSS3 变换（transform）效果。它可以帮助开发者快速而方便地实现各种复杂的变换效果，如旋转、缩放、平移等。
安装和引入
安装该包非常简单，只需要在终端中执行以下命令即可：
npm install egjs-jquery-transform --save
然后，在你的项目中引入该包：
import 'egjs-jquery-transform';
使用方法
使用该包非常简单，我们只需要调用 $().transform() 方法即可，其中 $() 表示要进行变换的元素，该方法接受一个字符串作为参数，指定要进行的变换类型和对应的值。下面是一些常见的变换类型及其对应的值：
- 移动：translate(x, y)
- 缩放：scale(x, y)
- 旋转：rotate(angle)
- 倾斜：skew(x-angle, y-angle)
例如，我们要将一个 div 元素向右移动 100px，代码如下：
$('div').transform('translate(100px, 0)');如果想要对多个属性同时进行变换，则可以使用空格分隔不同的变换类型即可，例如：
$('div').transform('translate(100px, 0) rotate(45deg)');示例代码
下面是一个完整的示例，实现了一个简单的 3D 立方体旋转效果：
-- -------------------- ---- -------
--------- -----
------
------
---------------------------- ------------
-------
---------- -
------------ -------
-
----- -
--------- ---------
------ ------
------- ------
---------------- ------------
----------- --------- -- ------------
-
----- --- -
--------- ---------
------ ------
------- ------
----------------- --------- ---- ---- -----
------- --- ----- -----
----------- -------
---------- -----
------------ ------
-
------ -
---------- ------------------
-
----- -
---------- --------------- ------------------
-
------ -
---------- -------------- ------------------
-
----- -
---------- --------------- ------------------
-
---- -
---------- --------------- ------------------
-
------- -
---------- -------------- ------------------
-
--------
-------
------
---- ------------------
---- -------------
---- ---------------------
---- --------------------
---- ---------------------
---- --------------------
---- -------------------
---- ----------------------
------
------
------- -----------------------------------------------------------
------- ---------------------------------------------------------------
--------
--- ----- - --
---------------------- -
----- -- ---
------------------------------- - ----- - --------
-- ------
---------
-------
-------总结
egjs-jquery-transform 是一个非常实用的 jQuery 插件，可以帮助我们轻松地实现各种变换效果。在使用时只需要注意传入正确的参数即可，同时也可以通过一些高级的 CSS 技巧来进一步优化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39243