## DEV Community is a community of 643,577 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

# Apply styling to HTML elements programmatically: Apply a Transform

Stella Mwanahamuntu
Hey, glad you stumbled on my dev.to account, this place place is great right?! Anyways, I make apps, websites and everything else pretty and usable. Javascript is pretty cool so I am into that too.

I was excited to remember transforms from my high-school mathematics.

Transforms in programming make it possible for you to make an element to grow, shrink and basically move in any direction you program it to.

The CSS syntax for applying transforms to an element

``````transform: none
transform-function
initial /* sets element to it's initial value */
inherit /* specifies that a property should inherit its value from its parent element */
``````

Transforms can be applied using CSS and/or JavaScript and in this post I will try to illustrate as many ways possible.

### The Rotate Method

The rotate method defines a 2D (the angle is specified in the parameter) and 3D(along the x,y,z angles). Rotate clockwise is represented by positive angles and rotation in the anticlockwise direction is represented by negative angles.

### The Translate Method

The translate method allows you to move an HTML element by changing it's X and/or Y position on the page.

### The Skew Method

Skewing slants or places an element on a page in such a way that is not parallel to the horizontal or vertical axis of the screen - omg, I don't know if that explanation makes sense.

### The Scale Method

The scale method resizes elements by specific ratios. The scale method takes one parameter, a decimal value that represents the % to scale.
Values greater than 1 make the image image bigger and values less than 1 but greater than 0, - 0 > let x=value < 1, make the image smaller.

• Note:The transform property can apply a 2D or 3D transformation to an element in both CSS and Javascript.