What on Earth is
Perspective ?

By Eva Ferreira

About me

María Evangelina Ferreira

What is perspective?

Perspective

From Latin: perspicere to see through.

Perspective is an approximate representation, on a flat surface (such as paper), of an image as it is seen by the eye.

Elements

Elements

Point of sight

Point of sight - By drawinghowtodraw.com

The Point of Sight is that point to which the eye of the observer (the person looking) is supposed to be directed when he looks straight before him.

Horizontal line

Line of horizon - By drawinghowtodraw.com

The Horizon (or Horizontal Line) resembles that horizon or boundary line that seems to part the ocean or ground from the sky, forming this joining line.

Line of horizon - By drawinghowtodraw.com

The Horizon line in a picture is determined by the point of sight, which is determined by the real or supposed position of the viewer (the person looking).

Vanishing Point

Vanishing Point Movie

Vanishing Point

Vanishing Point - By drawinghowtodraw.com

The point on the horizon at which receeding lines of the perspective converge.

Vanishing Point - By drawinghowtodraw.com

In photography

Perspective photography

The Golden Rule

Objects are drawn smaller as their distance from the observer increases.

The Golden Rule

The Golden Rule - By drawinghowtodraw.com

In photography

Perspective photography

In photography

Perspective photography

Perspective in
Web Design

The Z plane

The Plane

Transform Property

Scale
Skew
Rotate
Translate
Salad

Original space still occupied

Transform Origin

Transform-origin

No transform-origin
Transform-origin

The father

Daddy saves the day!

I am your... son?

Our HTML

Our CSS

Perspective with Transform

Perspective with Transform

  1. Create a parent element
  2. Apply
    transform-style: preserve-3d;
  3. Apply
    transform: perspective(-value-);

Perspective with Transform

I'm your son.

What we learned

Backface visibility

Backface visibility

I'm your son (:

Flip a card!

Our HTML

<div class="dad">
	<div class="hidden">
		<div class="front">
			<img>
		</div>
		<div class="back">
			<img>
		</div>
	</div>
</div>
		

Card flipping

Other components

Other components

Others

Browser compatibility

Browsers eternal battle

Compatibility