perspective - HTML CSS CSS Property

HTML CSS examples for CSS Property:perspective

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. perspective

Description

The perspective CSS property sets the perspective where all child elements of the object are viewed.

The following table summarizes the usages context and the version history of this property.

Item Value
Default value: none
Applies to:Transformable elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


perspective:     length | none | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length A length value indicating the depth of the perspective. If it is 0 or negative, no perspective transform is applied.
noneNo perspective transform has to be applied. This is default value.
initial Sets this property to its default value.
inherit take the value of its parent element perspective property.

The example below shows the perspective property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 perspective Property</title>
  <style type="text/css">
  .container {<!--from   w ww  . j a  va 2  s . c o  m-->
    width: 125px;
    height: 125px;
    perspective: 500px;
    border: 4px solid #e5a043;
    background: #fff2dd;
  }
  .transformed {
    -webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
    transform: translate3d(25px, 25px, 50px); /* Standard syntax */
  }
</style>
 </head>
 <body>
  <div class="container">
   <img src="https://www.java2s.com/style/demo/Opera.png" class="transformed" alt="Diamond Card">
  </div>
 </body>
</html>

Related Tutorials