The first functions moves the element according to the specified parameters on a three-dimensional plane, while the second function applies only to the Z axis, where the value of Z cannot be a percentage, unlike the X und Y values.
scale3d (x, y, z), scaleZ (z)
Similar to the previous functions, the scaling functions change the size of the element according to the specified parameters.
rotateX (angle), turnY (angle), rotate3d (x, y, z, angle)
The first two functions simply rotate the element around the horizontal and vertical axis. The angle can be specified in degrees, radians or gradients. The last function makes it possible to rotate the element three-dimensionally by displaying an imaginary vector through X, Y and Z, representation the rotation axis and the corresponding angle. The function „rotate3D“ is the one we will use today.
With this function we can define a perspective from which the animation should be displayed.
Practical example 3D animation with CSS and WebKit
In the following we will create a three-dimensional banner that rotates around a vector in the middle between the X- and Y-axis.
Let`s take a look at the corresponding example (for chrome and safari):