perspective
Perspective
UK [pəˈspektɪv] US [pərˈspektɪv]
css perspective property syntax
Function:perspective attribute defines the distance of the 3D element from the view, in pixels. This property allows you to change the 3D element's view of the 3D element. When you define the perspective attribute for an element, its child elements get the perspective effect, not the element itself.
Syntax: perspective: number|none
Description: number The distance between the element and the view, in pixels. none Default value. Same as 0. No perspective is set.
Note: Please use this property together with the perspective-origin property so that you can change the bottom position of the 3D element.
css perspective property example
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>Run instance »
Click the "Run instance" button to view the online instance