Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
MSDN Library
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

translate() function

Specifies a 2-D translation by the vector [tx,ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter.

CSS Transforms Module, Level 3, Section 13.1

 

Syntax

translate

( <translation-value-x> [ , <translation-value-y> ])

Parameters

translation-value-x

A translation value along the x-axis.

translation-value-y

Optional. A translation value along the y-axis.

Standards information

Examples

The following code snippet is an example of the translate function in use. When applied to a square blue div element, it has the effect illustrated in the image. (The light-blue square indicates the original position of the transformed element.)


div {    
  transform: translate(47px, -38px);
}


A square blue div with white text, after having the following transform function applied to it: transform: translate(47px, -38px);

Requirements

See also

Transform Functions
Mathematical Description of Transform Functions
Hands On: 2D Transforms

 

 

Show:
© 2015 Microsoft