Comment faire pour transiter spécifiquement l'origine de la perspective?

Question

Je n'arrive pas à animer l'origine de perspective sans utiliser all pour la propriété transition.

Ce code fonctionne dans Safari:

var sceneDiv = document.getElementsByClassName("scene")[0]; 
sceneDiv.style.perspectiveOrigin = "100% 0%"; 
sceneDiv.style.transition = "all 1s"; 

Ce code ne fonctionne pas:

var sceneDiv = document.getElementsByClassName("scene")[0]; 
sceneDiv.style.perspectiveOrigin = "100% 0%"; 
sceneDiv.style.transition = "perspective-origin 1s"; 

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"; 
 
}

.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); 
 
}

<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>

JSFiddleJe voudrais éviter d'utiliser all pour améliorer les performances. Qu'est-ce que je fais de mal dans la deuxième série d'instructions?

EDIT

J'ai essayé d'utiliser des extensions de WebKit dans le JavaScript. Même résultat

JSFiddle w/ WebKit

Answer 1

Cela pourrait être un bug dans Safari, où ils ne correspondent pas le raccourci transition: perspective-origin 1s;-transition: perspective-origin-x 1s, perspective-origin-y 1s;.

La définition claire de ces deux propriétés fonctionne également dans Safari. Mais Firefox et Chrome n'aiment pas quand seulement ces deux propriétés sont définies, donc vous aurez réellement besoin les trois d'entre eux:

transition: perspective 1s, perspective-origin-x 1s, perspective-origin-y 1s; 

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

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

 
    /* this does animates the object as expected */ 
 
    sceneDiv.style.transition = "perspective-origin 1s, perspective-origin-x 1s, perspective-origin-y 1s"; 
 
}

/* 
 
removed all the vendor specifics rules 
 
since most modern browsers don't need it anymore 
 
*/ 
 
.scene 
 
{ 
 
    width: 400px; 
 
    height: 300px; 
 
    background: #404040; 
 
    perspective: 600px; 
 
} 
 

 
.object 
 
{ 
 
    position: absolute; 
 
    margin-left: -200px; 
 
    margin-top: -200px; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 400px; 
 
    height: 400px; 
 
    background: #ff8000; 
 
    transform: translateZ(-1200px) rotateX(60deg); 
 
}

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

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