生成和操作 CSS 3D 转换效果的库:Sprite3D.js
jopen
10年前
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