transition perspective-origin

by Jithin Raj P R

HTML

<div class="scene">
  <div class="object"></div>
</div>

<button onclick="reset()">reset</button>
<button onclick="transitionAll()">all 1s</button>
<button onclick="transitionPO()">perspective-origin 1s</button>

CSS

.scene
{
	width: 400px;
	height: 300px;
  background: #404040;

	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	-ms-perspective: 600px;
	-o-perspective: 600px;
	perspective: 600px;
}

.object
{
	position: absolute;
	margin-left: -200px;
	margin-top: -200px;
	left: 50%;
	top: 50%;
	width: 400px;
	height: 400px;
  background: #ff8000;

	-webkit-transform: translateZ(-1200px) rotateX(60deg);
	-moz-transform: translateZ(-1200px) rotateX(60deg);
	-ms-transform: translateZ(-1200px) rotateX(60deg);
	-o-transform: translateZ(-1200px) rotateX(60deg);
  transform: translateZ(-1200px) rotateX(60deg);
}

JavaScript

function reset()
{
	var sceneDiv = document.getElementsByClassName("scene")[0];
	sceneDiv.style.perspectiveOrigin = "50% 50%";
	sceneDiv.style.transition = "none";
}

function transitionAll()
{
	var sceneDiv = document.getElementsByClassName("scene")[0];
	sceneDiv.style.perspectiveOrigin = "10% 50%";

	/* this works ok, but using "all" affects performance */
	sceneDiv.style.transition = "all 1s";
}

function transitionPO()
{
	var sceneDiv = document.getElementsByClassName("scene")[0];
	sceneDiv.style.perspectiveOrigin = "10% 50%";

	/* this doesn't animate the object as expected */
	sceneDiv.style.transition = "perspective-origin 1s";
}