CSS perspective-origin Property
CSS perspective-origin Property
CSS perspective-origin property determines the position at which the viewer is looking.
Note: This property is used as the vanishing point by the perspective property.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #000;
font-size: 17px;
}
#outerdiv{
margin-left: 100px;
background: #f69d3c;
perspective: 100px;
-webkit-perspective: 100px; /* Safari 4-8 */
perspective-origin: left;
-webkit-perspective-origin: left; /* Safari 4-8 */
}
#innerdiv{
background: #0066ff;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari 3-8 */
}
</style>
</head>
<body>
<h1>CSS perspective-origin Property</h1>
<div id="outerDiv">outerDiv
<div id="innerDiv">innerDiv</div>
</div>
</body>
</html>
Syntax
Using CSS
element{
perspective-origin: right;
}
Using Javascript
object.style.perspectiveOrigin="right";
Animatable
Yes, perspective-origin property is animatable. CSS Animatable Properties Reference.
Default Value
Default value for CSS perspective-origin property is 50% 50%.
Property Value
The following table provides a list of values for CSS perspective-origin property.
| Value | Explanation |
|---|
| x-axis | Specifies where the view is placed at the x-axis. Possible values:- left - shortcut for 0%
- center - shortcut for 50%
- right - shortcut for 100%
- length
- %
|
| y-axis | Specifies where the view is placed at the y-axis. Possible values:- left - shortcut for 0%
- center - shortcut for 50%
- right - shortcut for 100%
- length
- %
|
Using JavaScript
In the following example, we will demonstrate how to change the CSS perspective-origin property of an element using JavaScript.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #000;
font-size: 17px;
}
#outerdiv{
margin: 50px;
background: #f69d3c;
perspective: 100px;
-webkit-perspective: 100px; /* Safari 4-8 */
perspective-origin: left;
-webkit-perspective-origin: left; /* Safari 4-8 */
}
#innerdiv{
background: #0066ff;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari 3-8 */
}
</style>
</head>
<body>
<h1>CSS perspective-origin Property</h1>
<div id="outerDiv">outerDiv
<div id="innerDiv">innerDiv</div>
</div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementById("outerDiv");
function myFunction(){
x.style.perspectiveOrigin = "center";
x.style.WebkitPerspectiveOrigin = "center";
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
Share this Page
Meet the Author
