DPT Experiments

Display Examples

Block Example

Block 1
Block 2

Block: Expands to full width, starts on a new line.

Inline Example

Inline 1
Inline 2

Inline: Occupies only content width, inline with other elements.

Inline-Block Example

Inline Block 1
Inline Block 2

Inline-Block: Inline, but retains block-level properties.

None Example

None

None: Element is hidden, takes up no space.

Position Examples

static

I'm the first paragraph;

I'm the second paragraph;

I'm the third paragraph;

relative

I'm the first paragraph;

I'm the second paragraph;

I'm the third paragraph;

absolute

I'm the first paragraph;

I'm the second paragraph;

I'm the third paragraph;

Transform Examples

Translate

Moves the element

Scale

Scales the element

Rotate

Rotates the element

Skew

Skews the element

No Transform

No transformation applied