生成和操作 CSS 3D 轉換效果的庫: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 transformsSprite3D.stage()- create a root node to use as a main containerSprite3D.create()- creates a new Sprite3D div elementSprite3D.box()- creates a box (i.e. a cube)
Instance methods
Position
x()- get/set the x positiony()- get/set the y positionz()- get/set the z positionposition()- set the x, y and z positionmove()- adds the provided values to the current position
Rotation
rotationX()- get/set the rotation around the X axisrotationY()- get/set the rotation around the Y axisrotationZ()- get/set the rotation around the Z axisrotation()- set the rotation around all axisrotate()- adds the provided values to the current rotation
Scale
scaleX()- get/set the scale around the X axisscaleY()- get/set the scale around the Y axisscaleZ()- get/set the scale around the Z axisscale()- set the scale for all axis.
Hierarchy
appendChild()andremoveChild()- 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 transformationsperspective()- sets the amount of perspective (mainly useful for the stage, default is 800px)css()- chainable shorthand for setting a CSS value in the style propertyaddClass()andremoveClass()- chainable wrappers for the native classList.add() and classList.remove()html()- chainable shorthand for the innerHTML property of the elementsize()- chainable shorthand for setting both style.width and style.heightbind()andunbind()- chainable shorthand for addEventListener and removeEventListener methods, allows to pass multiple events and callbackstileSize()andtilePosition()- basic spritesheet supportset()- generic chainable setter/getter
本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!