perspective-origin - HTML CSS CSS Property

HTML CSS examples for CSS Property:perspective-origin

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

Description

The perspective-origin CSS property defines the vanishing point for the 3D space for the perspective property.

The following table summarizes the perspective-origin Property.

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

Syntax

The syntax of the property is as follows: 


perspective-origin:     [ x-position y-position ] | initial | inherit

If only one value is set, the second value is assumed to be center, which is equal to 50% value.

Property Values

The following table describes the values of this property.

Value Description
x-position Represents the horizontal position of the perspective origin.
y-position Represents the vertical position of the perspective origin.
initialSets this property to its default value.
inherittake the value of its parent element perspective-origin property.

x-position can have one of the following values:

  • percentage - Defines the offset relative to the width of the element.
  • length - Defines the offset using a length value.
  • left - Equal to 0% or a zero width.
  • center - Equal to 50% or half the width of the box. right - Equal to 100% or the full box width.

y-position can have one of the following values:

  • percentage - Defines the offset relative to the height of the element.
  • length - Defines the offset using a length value.
  • top - Equal to 0% or a zero height.
  • center - Equal to 50% or a half the height of the box. bottom - Equal to 100% or the full box height.

The example below shows the perspective-origin property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 perspective-origin Property</title>
  <style type="text/css">
  .container{<!--  w  w  w .  j  a  va  2s  .  c  o  m-->
    width: 125px;
    height: 125px;
    perspective: 300px;
    perspective-origin: 20% top;
    border: 4px solid #a2b058;
    background: #f0f5d8;
  }
  .transformed {
    -webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
    transform: rotate3d(0, 1, 0, 60deg); /* Standard syntax */
  }
</style>
 </head>
 <body>
  <div class="container">
   <img src="https://www.java2s.com/style/demo/Opera.png" class="transformed" alt="Club Card">
  </div>
 </body>
</html>

Related Tutorials