CSS Property: perspective-origin
[this page | pdf | back links]
The CSS (CSS3) perspective-origin property indicates
where a 3D element is notionally placed, based on the x-axis and y-axis.
The property applies to the child elements not the original element itself to
which this property is attached. It needs to be used in conjunction with the perspective
property and only affects 3D transformed elements.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
x-axis y-axis
|
x-axis defines
where the view is placed on the x-axis, y-axis where it is
placed on the y-axis.
Possible values for x-axis
are:
-
left
-
center
-
right
-
length (a CSS
length)
-
% (of element size)
Possible values for y-axis
are:
-
top
-
center
-
bottom
-
length (a CSS
length)
-
% (of element size)
|
|
Default Value:
|
50% 50%
|
|
JavaScript syntax:
|
e.g. object.style.perspectiveOrigin="20px
40px"
|
|
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;
perspective: 100px;}
div.x2 {width: 180px; height: 60px; border: thin solid green;
perspective: 100px;
perspective-origin: 10% 20%}
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; perspective: 100px;";
x.style.perspectiveOrigin = "10% 20%";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyPerspectiveOrigin() {
var x = document.createElement("DIV"); x.style.perspectiveOrigin = "10% 20%"; return (window.getComputedStyle(x, null).perspectiveOrigin == "10% 20%");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties