blob: 72fb8727448e085db0227fb5312f6bca93ab6108 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.box {
height: 200px;
width: 200px;
background-color: blue;
}
.test {
height: 200px;
width: 200px;
margin: 50px;
border: 1px solid black;
transform-style: preserve-3d;
}
@keyframes animate-perspective {
0% { transform: perspective(1000px); }
100% { transform: none; }
}
.inner {
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="test">
<div class="inner box">
</div>
</div>
<script>
let target = document.querySelector('.test');
getComputedStyle(target).getPropertyValue("transform");
target.style.animationPlayState = "paused";
target.style.animationName = 'animate-perspective';
target.style.animationDuration = '100s';
target.style.animationDelay = '-90s';
</script>
</body>
</html>