Back to Post: CSS3 Transforms: Adding 2D and 3D Effects To Web Pages

2D Transform Examples

With one exception, each of the boxes below has a transform applied on hover. The exception being the last box which has the transform applied by default.

A transition-duration of 0.5 seconds and a transition-delay of 0.1s have been given to each box to smooth out the transformation change. The timing-function used is ease.

Hover over each box to see what it does. The transform code used is inside each. Unless you're using an older version of IE, all of the below should work.

translate(100px, 50px);
translateX(100px);
translateY(50px);
scale(1.5, 1.25);
scaleX(1.5);
scaleY(1.25);
skew(10deg, 20deg);
skewX(10deg);
skewY(20deg);
rotate(-30deg);
matrix(1, 0, 3, 5, 0, 0)
transform:rotate(15deg) skew(5deg, 10deg)