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