CSS perspective property

CSS perspective

CSS perspective is used to give an element a 3d effect.

It denotes how far the element is from the user.

CSS perspective, should be given to the parent element, but only the child element will acquire the properties effect.

The values given in this property should be lower in-order to get an intense 3d effect.

To support perspective property on different browsers we need to add some prefixes, they are

  • -webkit- : It supports chrome, safari and new version of opera
  • -moz- : It support Firefox.
  • -o- : Old versions of opera.
  • -ms- : Internet explorer.

Example

Try Yourself

Simple animation using perspective

Example

Try Yourself