/

HTML / CSS / JavaScript Tutorial

CSS Property: transform-origin

[this page | pdf | back links]

The CSS (CSS3) transform-origin property defines the origin used by the transform property.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

x-axis y-axis z-axis

Origin defined by three values, where:

 

x-axis can be:

-        length (a CSS length)

-        % (of overall element size)

-        left (origin x-coordinate at left end of element)

-        centre (origin x-coordinate at centre of element)

-        right (origin x-coordinate at right end of element)

 

y-axis can be:

-        length (a CSS length)

-        % (of overall element size)

-        bottom (origin y-coordinate at bottom end of element)

-        centre (origin y-coordinate at centre of element)

-        top (origin y-coordinate at right end of element)

 

z-axis can be:

-        length (a CSS length)

 

Default Value:

50% 50% 0

JavaScript syntax:

e.g. object.style.transformOrigin="0 0"

Inherited:

No

Animatable:

Yes

 


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile