3D Rotation Icon 328317 Free Icons Library from icon-library.com
Introduction
Scalable Vector Graphics (SVG) is a popular format for creating graphics and animations on the web. One of the most interesting features of SVG is its ability to create 3D graphics using simple transformations like rotation. In this article, we will explore an example of 3D rotation in SVG.
The Example
Let's start by creating a basic SVG element with a rectangle inside it:
This will create a blue square in the center of the SVG element. Now, let's add some rotation to it. We can do this by using the "transform" attribute:
The "rotate" function takes three parameters: the angle of rotation in degrees, and the x and y coordinates of the point around which the rotation should occur. In this case, we are rotating the rectangle by 45 degrees around the center point (100, 100).
Adding Perspective
The rotation alone doesn't create a convincing 3D effect. We need to add some perspective to make it more realistic. We can do this by using the "perspective" attribute on the SVG element:
The "perspective" attribute determines the distance between the viewer and the SVG element. A higher value creates a stronger perspective effect. In this case, we are setting the perspective to 500 units.
Animating the Rotation
Now that we have our 3D rectangle, let's make it more interesting by adding an animation. We can use the "animateTransform" element to create a smooth rotation:
The "animateTransform" element takes several attributes. The "attributeName" and "attributeType" specify which attribute we want to animate ("transform" in this case). The "type" attribute specifies the type of transformation we want to animate ("rotate" in this case). The "from" and "to" attributes specify the starting and ending values of the animation. The "dur" attribute specifies the duration of the animation, and the "repeatCount" attribute specifies how many times the animation should repeat (indefinitely in this case).
Conclusion
In this article, we have explored an example of 3D rotation in SVG. With just a few simple transformations, we were able to create a convincing 3D effect. By adding perspective and animation, we made our 3D rectangle even more interesting. SVG is a powerful format that allows for a wide range of creative possibilities on the web.
