> For the complete documentation index, see [llms.txt](https://web-dev-guide.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://web-dev-guide.wishtack.io/css/transforms.md).

# Transforms

## 2D transforms

2D transforms modify position, rotation and size of elements using CSS.

### Example - Rotating an element on hover

```css
.wt-demo-transform {
    border-style: solid;
    border-width: 1px;
    height: 20px;
    width: 100px;
    margin: auto;
}

.wt-demo-transform:hover {
    transform: rotate(180deg) scale(2);
}
```

<https://codepen.io/younes-jaaidi/pen/mGXpPz>

{% embed url="<https://codepen.io/younes-jaaidi/pen/mGXpPz>" %}

## 3D transforms

### Example - Rotating an element around the Y axis on hover with a perspective effect

```css
.wt-demo-transform {
    border-style: solid;
    border-width: 1px;
    width: 100px;
    margin: auto;
    padding: 10px;
}

.wt-demo-transform:hover {
    transform: perspective(100px) rotateX(10deg) rotateY(45deg);
}
```

<https://codepen.io/younes-jaaidi/pen/XPZVgg>

{% embed url="<https://codepen.io/younes-jaaidi/pen/XPZVgg>" %}

### Detailed post concerning perspective

<https://css-tricks.com/almanac/properties/p/perspective/>

{% embed url="<https://css-tricks.com/almanac/properties/p/perspective/>" %}