生成和操作 CSS 3D 轉換效果的庫:Sprite3D.js

jopen 10年前發布 | 24K 次閱讀 前端技術 Sprite3D.js

Sprite3D.js 是生成和操作 CSS 3D 轉換效果的庫。Sprite3D.js 沒有任何的依賴項,所以非常容易集成 JS 庫。Sprite3D.js 使用簡單的 JavaScript 語法來控制 3D 轉換效果。瀏覽器支持 Chrome, Safari, iOS, Android 4, BlackBerry, Firefox 10 和 Internet Explorer 10。

參考

請參考源代碼中的注釋,了解有關如何使用這些方法的更詳細的說明。

Static methods

  • Sprite3D.isSupported() - check support for CSS 3D transforms
  • Sprite3D.stage() - create a root node to use as a main container
  • Sprite3D.create() - creates a new Sprite3D div element
  • Sprite3D.box() - creates a box (i.e. a cube)

Instance methods

Position

  • x() - get/set the x position
  • y() - get/set the y position
  • z() - get/set the z position
  • position() - set the x, y and z position
  • move() - adds the provided values to the current position

Rotation

  • rotationX() - get/set the rotation around the X axis
  • rotationY() - get/set the rotation around the Y axis
  • rotationZ() - get/set the rotation around the Z axis
  • rotation() - set the rotation around all axis
  • rotate() - adds the provided values to the current rotation

Scale

  • scaleX() - get/set the scale around the X axis
  • scaleY() - get/set the scale around the Y axis
  • scaleZ() - get/set the scale around the Z axis
  • scale() - set the scale for all axis.

Hierarchy

  • appendChild() and removeChild() - just kidding, these are the native methods of the HTML elements (and remember, the Sprite3D object IS the HTML element)

Helper functions

  • origin() - specifies the registration point of the element (default is top-left corner)
  • transformOrigin() - specifies the pivot around which the element is rotated and scaled (default is center)
  • transformString() - lets you decide the order of the transformations
  • perspective() - sets the amount of perspective (mainly useful for the stage, default is 800px)
  • css() - chainable shorthand for setting a CSS value in the style property
  • addClass() and removeClass() - chainable wrappers for the native classList.add() and classList.remove()
  • html() - chainable shorthand for the innerHTML property of the element
  • size() - chainable shorthand for setting both style.width and style.height
  • bind() and unbind() - chainable shorthand for addEventListener and removeEventListener methods, allows to pass multiple events and callbacks
  • tileSize() and tilePosition() - basic spritesheet support
  • set() - generic chainable setter/getter

項目主頁:http://www.baiduhome.net/lib/view/home/1400826906268

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!