Gain insights into CSS to tailor web styles, layout, text, and images. Discover core CSS fundamentals, adding colors, controlling layouts, and exploring essential CSS animation functions to create professional web pages.

Cascading Style Sheets (CSS) is a document type and the associated scripting language that describes the presentation of HTML documents. Using the CSS language, you can control the look and feel of web pages by defining layout, text, and image properties to be applied in a wide array of contexts.

This course is a comprehensive introduction to both writing and implementing CSS. Using the document hierarchy model, you’ll learn how to tailor web styles to specific areas. With your hierarchy defined, you’ll dive deep into CSS fundamentals, adding colors, text styles, and backgrounds to your web page. After you’ve defined these elements, you’ll use CSS to define layouts around pictures and text flow and completely control your web page’s look. You’ll wrap up by exploring the essential animation functions of CSS.

By the end of this course, you’ll have functional mastery of Cascading Style Sheets and the CSS scripting language. You’ll be prepared to build professional web pages with your code.

Luka

Highly recommended! Tim covers everything & gets right to the important stuff!

Frontend dev

The Complete Beginner’s Guide to CSS

## The `transform` property

The `transform` property allows us to visually manipulate elements by scaling, skewing, rotating, or translating them.

For example:

```css
.element {   
  width: 30px;   
  height: 30px;   
  transform: scale(10); 
}
```

Despite our declarations for `height` and `width`, the `transform` property scales our element to be ten times their original size!

Transforms are especially fun when combined with animations.


## Transform functions

We can use the following functions:

- `scale()`: scales the size of an element.
- `skew()`: turns an element to the right or left.
- `rotate()`: rotates the element clockwise.
- `translate()`: repositions the element in a horizontal or vertical direction.
- `perspective()`: sets the depth used in 3D transforms.

Let’s review each in more detail.

### The `scale()` function

The `scale()` function is shorthand for the `scaleX()` and `scaleY()` functions.

The `scaleX()` function resizes the element horizontally (x-axis) and the `scaleY()`  function resizes it vertically (y-axis).

For example, lets scale the `width` of `.element` by `2` (doubling its width) and reduce its `height` by `0.5` (reducing its height by half):

```css
.element {
  transform: scale(2, 0.5);
}
```

The first parameter of the `scale()` function is `scaleX()` and the second is `scaleY()`.

### The `skew()` function

The `skew()` function tilts an element left or right. It’s also shorthand for the `skewX()` and `skewY()` functions. Below are some examples of the different ways we can skew an element.

To skew horizontally (x-axis):


```css
transform: skewX(15deg);
```

To skew vertically (y-axis):

```css
transform: skewY(15deg);
```

To skew along both axes simultaneously:

```css
transform: skew(15deg, 15deg);
```

### The `rotate()` function

The `rotate()` function rotates an element clockwise from its original position:

```css
transform: rotate(25deg);
```

We can use a negative value to rotate it in the opposite direction:

```css
transform: rotate(-25deg);
```

### The `translate()` function

The `translate()` function shifts an element in a horizontal or vertical direction:

```css
transform: translate(50px, 10px);
```

The example above moves the element `50px` (to the right) on its horizontal axis and `10px` (down) on its vertical axis.

Similarly with the `scale()` and `skew()` functions, the `translate()` function is shorthand for the `translateX()` and `translateY()` functions:


```css
transform: translateX(50px);
transform: translateY(10px);
```
We use negative values to move an element to the left or up.

We can use any valid length value, like px, em, or rem.

## Combining multiple transforms

We can combine multiple transforms by separating each function with a space:

```css
transform: rotateY(30deg) scaleX(2) translateX(200px);
```

## 3D transforms

With 3D transforms, we add a third z-axis, which adds **depth**.

The following functions control the z-axis:

- The `translateZ()` function.
- The `rotateZ()` function.
- The `scaleZ()` function.

For these, we have the corresponding shorthand functions `translate3d()`, `rotate3d()`, and `scale3d()` for when we want to combine the `translateX()`, `translateY()` and `translateZ()` functions.

### The `perspective` transform

The `perspective` transform specifies the distance at which a 3D object appears from the viewer:
```css
.element {
  perspective: 100px;
}
```
Low values produce a more intense effect in comparison to high values.

### The `perspective-origin` transform

The `perspective-origin` transform sets the position from which the user views the element:

```css
.element {
  perspective: 100px;
  perspective-origin: left;
}
```

It positions the 3D object as if it’s being viewed differently.


# The `transform` property

The `transform` property allows us to visually manipulate elements by scaling, skewing, rotating, or translating them.

For example:

```css
.element {   
  width: 30px;   
  height: 30px;   
  transform: scale(10); 
}
```

Despite our declarations for `height` and `width`, the `transform` property scales our element to be ten times their original size!

Transforms are especially fun when combined with animations.


# Transform functions

We can use the following functions:

- `scale()`: scales the size of an element.
- `skew()`: turns an element to the right or left.
- `rotate()`: rotates the element clockwise.
- `translate()`: repositions the element in a horizontal or vertical direction.
- `perspective()`: sets the depth used in 3D transforms.

Let’s review each in more detail.

## The `scale()` function

The `scale()` function is shorthand for the `scaleX()` and `scaleY()` functions.

The `scaleX()` function resizes the element horizontally (x-axis) and the `scaleY()`  function resizes it vertically (y-axis).

For example, lets scale the `width` of `.element` by `2` (doubling its width) and reduce its `height` by `0.5` (reducing its height by half):

```css
.element {
  transform: scale(2, 0.5);
}
```

The first parameter of the `scale()` function is `scaleX()` and the second is `scaleY()`.

## The `skew()` function

The `skew()` function tilts an element left or right. It’s also shorthand for the `skewX()` and `skewY()` functions. Below are some examples of the different ways we can skew an element.

To skew horizontally (x-axis):


```css
transform: skewX(15deg);
```

To skew vertically (y-axis):

```css
transform: skewY(15deg);
```

To skew along both axes simultaneously:

```css
transform: skew(15deg, 15deg);
```

## The `rotate()` function

The `rotate()` function rotates an element clockwise from its original position:

```css
transform: rotate(25deg);
```

We can use a negative value to rotate it in the opposite direction:

```css
transform: rotate(-25deg);
```

## The `translate()` function

The `translate()` function shifts an element in a horizontal or vertical direction:

```css
transform: translate(50px, 10px);
```

The example above moves the element `50px` (to the right) on its horizontal axis and `10px` (down) on its vertical axis.

Similarly with the `scale()` and `skew()` functions, the `translate()` function is shorthand for the `translateX()` and `translateY()` functions:


```css
transform: translateX(50px);
transform: translateY(10px);
```
We use negative values to move an element to the left or up.

We can use any valid length value, like px, em, or rem.

# Combining multiple transforms

We can combine multiple transforms by separating each function with a space:

```css
transform: rotateY(30deg) scaleX(2) translateX(200px);
```

# 3D transforms

With 3D transforms, we add a third z-axis, which adds **depth**.

The following functions control the z-axis:

- The `translateZ()` function.
- The `rotateZ()` function.
- The `scaleZ()` function.

For these, we have the corresponding shorthand functions `translate3d()`, `rotate3d()`, and `scale3d()` for when we want to combine the `translateX()`, `translateY()` and `translateZ()` functions.

## The `perspective` transform

The `perspective` transform specifies the distance at which a 3D object appears from the viewer:
```css
.element {
  perspective: 100px;
}
```
Low values produce a more intense effect in comparison to high values.

## The `perspective-origin` transform

The `perspective-origin` transform sets the position from which the user views the element:

```css
.element {
  perspective: 100px;
  perspective-origin: left;
}
```

It positions the 3D object as if it’s being viewed differently.


Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Transforms

The `transform` property

Transform functions

Transforms

The transform property

Transform functions

The `transform` property