Elementor Rotate [Scale Transform] Image Text tutorial -CSS transforms Using Free version
Hey Designers! Looking to rotate your image or text in Elementor. Well, you can do it easily with custom CSS in Elementor on your WordPress website.
► Get Elementor Pro — https://wpalgoridm.com/elementor
Apart from that you can scale, skew and translate any Section/Column/Widget in Elementor. All this is done by using something called 2D transforms.
They can also help you achieve absolute positioning within a column or a section.
For instructions related to free version CSS, refer to the first comment.
Copy the following code into Custom CSS in Pro version:
/*Position an element*/
selector{
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari */
-moz-transform: translate(50px, 100px); /* mozilla */
-o-transform: translate(50px, 100px); /* opera */
transform: translate(50px, 100px);
}
/*Code ends here*/
/*Rotate an Element*/
selector{
-ms-transform: rotate(20deg); /* IE 9 */
-moz-transform: rotate(20deg); /* IE 9 */
-o-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
/*Code ends here*/
/*Scale an element*/
selector{
-ms-transform: scale(2, 3); /* IE 9 */
-o-transform: scale(2, 3); /* IE 9 */
-moz-transform: scale(2, 3); /* IE 9 */
-webkit-transform: scale(2, 3); /* Safari */
transform: scale(2, 3);
}
/*Code ends here*/
/*Skew an element*/
selector{
-ms-transform: skew(20deg); /* IE 9 */
-moz-transform: skew(20deg); /* IE 9 */
-o-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
/*code ends here*/
/*Matrix Method here*/
/* matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
*/
selector{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-o-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-moz-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Simply change the values to your requirement.
*Some Important Links*
Elementor Custom Breakpoints Tutorial:
• Elementor custom breakpoints: Solving...
Join the Facebook Group: / designschoolwp
Design your website: • Design WordPress website
Build your website: • Build WordPress Website
Customise your website:
• Customize WordPress website