CSS3 Transforms

Designing, Defining, and Triggering CSS3 Transforms without Custom Libraries

Zoom

Zoom recording - starts at 00:48

Links

Items can be rotated, skewed, scaled using CSS.

transform: rotate()

BOX
Box not rotated
Note the difference.
transform: rotateX(Xdeg);
X is flipped down/up
BOX
transform: rotateY(Ydeg);
Y is flipped left/right
Note the difference.
transform: rotateZ(Zdeg);
Z spins clockwise
Box
transform: rotateZ(Zdeg);
Z spins clockwise

transform: scale()

box not scaled
BOX
transform: scaleX(1.5);
BOX
transform: scaleY(.5);
BOX
transform: scale(2.5,1.5);
BOX
transform: scaleZ(1.5);
transform: perspective(100px)
scaleZ(1) rotateX(45deg);

transform: skew()

BOX
box not skewed
BOX
transform: skewX(x-angle);
BOX
transform: skewY(y-angle);
BOX
transform: skew(x-angle,y-angle);

transform: translate()

MDN states "Then, the translateZ() function moves the element 200 pixels "outward" from the screen, toward the user. This has the effect of making the element appear larger when viewed on a 2D display, or closer when viewed using a VR headset or other 3D display device."

BOX
box not translated
BOX
transform: translate(x,y);
BOX
transform: translateX(x);
BOX
transform: translateY(y);
BOX
transform: translateZ(z);

text-transform:

Hover to make me uppercase.
text-transform: uppercase;

HOVER TO MAKE ME LOWERCASE.
text-transform: lowercase;

Hover to make me capitalized.
text-transform: capitalize;

Perspective

To make a 3d item, the use of perspective is needed. Below are examples of how to use each.

left perspective options center perspective options right perspective options

Making a Cube with Transforms

The code for the cube is from 3dtransforms.desandro.com. Some styling and rotation was done by student.

front
back
right
left
top
bottom
snip