Transforms

2D transforms

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

Example - Rotating an element on hover

.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

3D transforms

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

.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);
}