/

HTML / CSS / JavaScript Tutorial

CSS Property: perspective

[this page | pdf | back links]

The CSS (CSS3) perspective property indicates how far a 3D element is notionally placed behind the screen. The property applies to the child elements not the original element itself to which this property is attached.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

length

Page breaking defined automatically

none

(default value). Same as 0, i.e. no perspective set

 

Default Value:

none

JavaScript syntax:

e.g. object.style.perspective="30px"

Inherited:

No

Animatable:

Yes

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div.x1 {width: 180px; height: 60px; border: thin solid green;}
div.x2 {width: 180px; height: 60px; border: thin solid green;
        perspective: 100px}
div.x {background-color: orange; border: 3px solid blue;
        transform: rotateX(30deg)}
</style>
</head>
<body>

<div class="x1">
  <div class="x">Element with default property</div>
</div><br>
<div class="x2">
  <div class="x">Element with property set by HTML</div>
</div><br>
<div id="x3">
  <div class="x">Element with property set by JavaScript</div>
</div><br>

<script>
var x = document.getElementById("x3");
x.style = "width: 180px; height: 60px; border: thin solid green";
x.style.perspective = "100px";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyPerspective() {
  var x = document.createElement("DIV"); x.style.perspective = "100px"; return (window.getComputedStyle(x, null).perspective == "100px");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile