The component covers all 3D transform functions and renders the update with either matrix() or matrix3d() functions, depending on the functions used and their values. The notation is also fairly easy to use and familiar with other components.
3D Transformperspective:400 to apply a 400px perspective.translateX:150 to translate an element 150px to the right.translateY:-250 to translate an element 250px towards the top.translateZ:-250 to translate an element 250px away from the viewer, making it appear smaller. This function can be combined with the perspective function to take effect or the parent's perspective; the smaller perspective value, the deeper translation.translate3d:[-150,200,150] to translate an element 150px to the left, 200px to the bottom and 150px closer to the viewer, making it larger. When third value is used, it requires using a perspective.rotateX:250 will rotate an element clockwise by 250 degrees on X axis. Requires perspective.rotateY:-150 will rotate an element counter-clockwise by 150 degrees on Y axis. Requires perspective.rotateZ:90 will rotate an element clockwise by 90 degrees on Z axis.rotateX, rotateY, and rotateZ functions and rotates an element on all axes. Eg. rotate3d:[250,-150,90] will produce the same effect as the three above combined. The X and Y axes require a perspective.skewX:50 will skew the element by 50 degrees on X axis.skewY:-50 will skew the element by -50 degrees on Y axis.skew:[50,50] will skew a target element on X axis by 50 degrees and 50 degrees on Y axis.scaleX:1.5 will increase the scale of a target element on the X axis by 50%.scaleY:0.5 will decrease the scale of a target element on the Y axis by 50%.scaleZ:0.75 will decrease the scale of a target element on the Z axis by 25%.scale3d:[1.5,0.5,0.75] will produce the same effect as the 3 above combined.Now let's have a look at the notation and a quick example:
let mx1 = KUTE.to('el1', { transform: { translate3d:[-50,-50,-50]} })
let mx2 = KUTE.to('el2', { transform: { perspective: 100, translateX: -50, rotateX:-180} })
let mx3 = KUTE.to('el3', { transform: { translate3d:[-50,-50,-50], skew:[-15,-15]} })
let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-360,0], scaleX:0.5 } })
So the second element uses it's own perspective but notice that the parent perspective also apply. This case must be avoided in order to keep performance in check: one perspective is best.
Chained TransformationsSimilar to the other component the Transform Matrix component will produce the same visual experience, but with the matrix3d function.
matrix3d function? Simple: we can of course interpolate 16 numbers super fast, but we won't be able to rotate on any axis above 360 degrees. As explained here, surely for performance reasons the browsers won't try and compute angles above 360 degrees, but simplify the number crunching because a 370 degree rotation is visualy identical with a 10 degree rotation.matrix3d string/array values, but considering the size of this component, I let you draw the conclusions.fromTo() method will never fail and it's much better when performance and sync are a must, and for to() method we're storing the values from previous animations to have them ready and available for the next chained animation.matrix3d to matrix and vice-versa whenever needed to save power. Neat?rotate3d property makes alot more sense for this component since the DOMMatrix rotate(angleX,angleY,angleZ) method works exactly the same, while the rotate3d(vectorX,vectorY,vectorZ,angle) function is a thing of the past, according to Chris Coyier nobody use it.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4