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:
https://youtu.be/xY0_iC72ca4

Join the Facebook Group: https://www.facebook.com/groups/designschoolwp

Design your website: https://www.youtube.com/playlist?list=PL19jB3vK-qIUWYcJE0r2oFjRxMLxPBLFt

Build your website: https://www.youtube.com/playlist?list=PL19jB3vK-qIXBIpyRqq8nrjb6Z14l-7gs

Customise your website:
https://www.youtube.com/playlist?list=PL19jB3vK-qIWUqfAvRsGpbcrkmEnedXd8