CSS Animatable perspective Property Example

<!DOCTYPE html>
<html>
<head>
<style> 
#container {
    position: relative;
    margin: auto;
    height: 150px;
    width: 250px;
    padding: 10px;
    background: #333;
    text-align: center;
    animation: anim 5s infinite;
    perspective: 300px;
    color: #fff;
    box-shadow: 0 0 10px 0 #888;
}

@keyframes anim {
  	50% {perspective: 200px;}
}

#child {
    padding: 50px;
    position: absolute; 
    background-color: red;
    transform: rotateX(45deg);
    border-radius: 10px;
}
</style>
</head>
<body>

<h1>Animatable 'perspective' Property</h1>
<hr>

<p>Experience the changing perspective of the inner child container.<p>
  
<div id="container">Perspective Property
  	<div id="child">Think that you are looking down on a wall. See what happens when you gradually change the perspective!</div>
</div>

</body>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
<style> 
#container {
    position: relative;
    margin: auto;
    height: 150px;
    width: 250px;
    padding: 10px;
    background: #333;
    text-align: center;
    animation: anim 5s infinite;
    perspective: 300px;
    color: #fff;
    box-shadow: 0 0 10px 0 #888;
}
​
@keyframes anim {
    50% {perspective: 200px;}
}
​
#child {
    padding: 50px;
    position: absolute; 
    background-color: red;
    transform: rotateX(45deg);
    border-radius: 10px;
}
</style>
</head>
<body>
​
<h1>Animatable 'perspective' Property</h1>
<hr>
​
<p>Experience the changing perspective of the inner child container.<p>
  
<div id="container">Perspective Property
    <div id="child">Think that you are looking down on a wall. See what happens when you gradually change the perspective!</div>
</div>
​
</body>
</html>                 