W3 Mind Logo
Home » How to Apply Multiple Transform Properties to an Element – CSS3

How to Apply Multiple Transform Properties to an Element – CSS3

If you guys don’t know how to apply multiple transform properties to an element, so here is the example.

But first you guys need to know how it works. So keep in mind that the transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.

See the below example, this will rotate the element 20 degrees clockwise and then translate it 300px to the right.

				
					transform: rotate(20deg) translateX(300px);
				
			

But if we change the order of the transforms will change the output. The result will be different.

				
					transform: translateX(300px) rotate(20deg);
				
			
About Author
Picture of W3Mind

W3Mind

W3Mind focuses on Blogging, Make Money Online, SEO, Business Blogging, Social Media, WordPress, Internet Tools, Web Design and Development.
Give it a Share
Facebook
Twitter
LinkedIn
You May Also Like
How to
START A
BLOG
(step by step)
Load WordPress Sites in as fast as 37ms!