CSS3 2D transforms allow you to manipulate boxes for effects like rotating, scaling, and skewing, without using images, Flash, or JavaScript. Sadly, IE 8 and earlier don't support CSS3 transforms—but you can get the same results using its mysterious Matrix filter in your CSS. IE's proprietary filter property is not valid CSS, but it's ignored by other browsers and doesn't require the use of JavaScript. The Matrix filter allows you to put in four numbers to produce transformation effects. Without the Transforms Translator, you'd need to know matrix mathematics to come up with the four values. This tool does the math for you to translate your simple CSS3 transforms syntax into a Matrix filter value for IE 6 through 8. Learn more about filters and the Transforms Translator.

Questions or comments? Please feel free to do so on my blog article on the Translator.

Supported Transform Functions



This tool written by Zoltan Hawryluk and Zoe Mickley Gillenwater.

Powered by CSS Sandpaper, with the help of code written by Weston Ruter, Dean Edwards and Andrew Johnson.

This is the object before transformation.

This is the object after transformation.

Step 1: Input your CSS3 transform functions

Don't know what to try? Use the default transform provided.

px px

Step 2: Copy and paste the cross-browser CSS!

For CSS3 Savvy Browsers

For IE


					
								

					
To ensure you're transforms will look optimal in IE, please take 
					a look at our user notes.  

					

					
					

					

						

							Error
						


						


						

					

				

				

			




			

				
			

			

		


		


			

				rotate(
				angle)
			

			

			

				
					
					




					

						Rotates HTML elements. The
						
							angle
						
						can be in degrees (e.g. rotate(30deg)) or radians (e.g. 
						rotate(1.3rad))
					



					

						
							

								
									
										rotate(45deg)
									
								
							

						
						
							

								
									

										

											

												This is the object before transformation.
											

										

										

											

												

													This is the object after transformation.
												

											

										

									

										
							

						
					


					
				
			

			

				
			

			

		


		


			

				scale(
				sx,
				sy)
			

			

				

				
					
					


					

						Scales HTML elements. The parameters
						
							sx
						
						and
						
							sy
						
						are numbers, where
						
							1
						
						represents the original size,
						
							2
						
						represents twice the size,
						
							0.5
						
						represents half the size, etc. Note that if
						
							sy
						
						isn’t specified, it is assumed to be equal to
						
							sx
						
						. Related functions are
						
							scaleX(sx)
						
						(scales horizontally only) and
						
							scaleY(sy)
						
						(scales vertically only).
					


					


					

						
							

								
									Original
								
								
									
										scaleX(1.3)
									
								
								
									
										scaleY(1.3)
									
								
								
									
										scale(0.5, 0.5)
									
								
								
									
										scale(-1, 1)
									
								
								
									
										scale(1, -1)
									
								
							

						
						
							

								
									
										
									
								
								
									
										
										
									
								
								
									
										
										
											
										
									
								
								
									
										
											
												
									
								
								
								
									
										
											
												
									
								
								
								
									
										
											
												
									
								
								
							

						
					


					
					
Image Source: Wikimedia Commons.

					
				
				

				

					
				

			

		


		


			

				skew(
				x-angle,
				y-angle)
			

			

				

				
					
					





					

						Skews the object around the x and y axes by the specified angles
						in degrees or radians. If
						
							ay
						
						isn’t provided, it is assumed to be
						
							0deg
						
					


					

						
							

								
									
										skewX(25deg)
									
								
								
									
										skewY(35deg)
									
								
								
									
										skew(25deg, 35deg)
									
								
							

						
						
							

								
									

										

											

												This is the object before transformation.
											

										

										

											

												This is the object after transformation.
											

										

									

										

								
									

										

											

												This is the object before transformation.
											

										

										

											

												This is the object after transformation.
											

										

									

										

								
									

										

											

												This is the object before transformation.
											

										

										

											

												This is the object after transformation.
											

										

									

										
							

						
					



					
				
				

	
				

					
				

			

		


		


			

				translate(
				tx,
				ty)
			

			

				

				
					
					





					

						Moves the object tx horizontally and ty vertically.
					



					

						
							

								
									
										translateX(40px)
									
								
								
									
										translateY(30px)
									
								
								
									
										translate(40px, 30px)
									
								
							

						
						
							

								
									

										

											

												This is the object before transformation.
											

										

										

											

												This is the object after transformation.
											

										

									

										

								
									

										

											

												This is the object before transformation.
											

										

										

											

												This is the object after transformation.
											

										

									

										

								
									

										

											

												This is the object before transformation.
											

										

										

											

												This is the object after transformation.
											

										

									

										
							

						
					


					
				
				

				

					
				

			

		


		


			

				matrix(
				a,
				c,
				b,
				d,
				tx,
				ty)
			

			

				

				
					
					


					

						This is the hardest of all the transform
							functions to understand unless you are mathematically gifted.
						However, for those who are stubborn, geeky, or both, a brief
						explanation follows. If you don't undertand everything below,
						don't fret —
						you'll probably never use this function.
					


					

						This function is almost the direct equivalent to Microsoft's Matrix Filter.
						These first four values,
						
							a
						
						,
						
							c
						
						,
						
							b
						
						and
						
							d
						
						, correspond to the first four values of Microsoft Matrix Filter,
						
							M11
						
						,
						
							M12
						
						,
						
							M21
						
						and
						
							M22
						
						. In other words, this statement
					
transform: matrix(1, 2, 3, 4, 0, 0);




					is the same as this statement:


					
filter: progid:DXImageTransform.Microsoft.Matrix(
         M11=1,
         M12=3,
         M21=2,
         M22=4,
         SizingMethod='auto expand');



					Note that
					
						c
					
					and
					
						b
					
					are out of order. This is due to a difference in Microsoft's
					convention compared to the W3C's.
					
					
					
					

					

						The last two numbers,
						
							tx
						
						and
						
							ty
						
						, are the translation factors for the object. In other words, this
						statement:
					
transform: matrix(1, 0, 0, 1, 22px, 33px);



					

						is the same as this statement
					


					
transform: translate(22px, 33px);




and this mathematical notation:




					

						Note: at the time of this writing, Firefox
						(version 3.6) requires units for
						
							tx
						
						and
						
							ty
						
						(such as
						
							px
						
						or
						
							em
						
						) which Safari 4, Opera 10.10 and Chrome 5.0 require units
						not be supplied. At this time, this tool 
						does not take this into account.
					



					

						As mentioned earlier, if you aren’t familiar with 
						linear algebra and matrix arithmetic,
						this function will be hard to understand.
						That's okay, because most designers will never
							need this function. For further information, you may want to read
						Wikipedia’s
							Transformation Matrix article, although if you are mathematically
						challenged, you may run away from your computer screaming.
					






					
				
				

				

					
				

			

			
			

		


		

		

			Please Wait.