CSS Transform is a CSS property that allows you to modify the appearance and position of an element without affecting the layout of the document. It allows you to rotate, scale, skew, or translate an element in 2D or 3D space.
Using CSS Transform Effects:
You can see the below video to get an insight into how you can use CSS Transform Effects, Or you can follow the documentation whichever you find convenient.
At first, In the ‘CSS Transform’ menu of the Advanced tab, you will get the CSS Transform Feature. From there you can activate the feature. After activating the feature you will get 4 more options, Translate, Rotate, Scale, and Skew.
These 04 features will help you to give a shape of your elements. The meaning of these functions are as follows,
Translate – It allows you to move an element horizontally or vertically.
Rotate – Using this function you can rotate an element around its center point.
Scale – This function allow you to increase or decrease the size of an element.
Skew– This function allows you to distort the shape of an element by skewing it along the x or y axis.
Step1
Now we will show how you can use our Translate feature in our CSS Transform effect.
In the Translate feature, you will get two more functions. They are:
- Translate X: You can change the position of your elements within X-Axis
- Translate Y: It will help you to change the position of your elements within the Y-axis.
And there is a reset button for you. You can reset to the default of design by clicking that button.
Step2
we will show how you can use our Rotate feature in our CSS Transform effect.
In the Rotate feature, you can rotate elements in Rotate X, Rotate Y and Rotate Z position for X, Y and Z Axis respectively.
Step3
After that, In the Scale Feature, you will get two more options to scale your element. You can magnify your element within X & Y-axis
Step4
With the Skew Feature, you can shape your element at any angle.
