If you come across a rather complex 3D animation (important in the creation process of a 3D configurator) while surfing the internet and your curiosity leads you to click on it to see if it has been realized in Flash, the acumen of our web developer makes you suspect that it could not be otherwise.
In fact, there are not many alternatives: JavaScript, canvas and some other options. In this article we would like to introduce some CSS features that allow us to manage animations and transformations to the elements of a website.
CSS also for 3D?
Yes, even for 3D. Nut let`s get down to it right away. The properties we will analyze are only available for WebKit Browser Engine. In this we will create a 3D animation with CSS. As a result, we will receive a banner that rotates three-dimensionally around its axis.
3D animations can be managed using the -webkit-transform property, which can be expanded in various ways:
translate3d(x,y,z), translateZ(z)
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.
perspective(p)
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):
JavaScript
HTML
CSS
HTML code is very simple. In the CSS, we see the definition of the keyframe at the top with the steps that make up the animation. The function -webkit-transform is extended by rotation3D, which gets the values of the vector by which the animation (1, 1, 0) and the angle should be controlled.
Among other things, we emphasize the property -webkit-animation: spin3s infinite ease-out, which we use to determine the usage of the animation defined with the keyframe spin.
Final Thoughts.
Through the use of CSS, it is now possible to create futuristic banners and breathtaking 3D animations that can be used to create eye-catching web pages. We will see how the web browser engines that support these very interesting CSS rules are updated.