perspective-originを具体的に遷移させる方法は？

Question

transitionプロパティにallを使用しないと、パースペクティブ起点をアニメートできないようです。

このコードは、Safariで動作します。

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

このコードはしていません：

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>

JSFiddle

パフォーマンスを向上させるためにallを使用しないでください。 2番目の指示で何が間違っていますか？

EDIT

私はJavaScriptでWebKitの拡張を使用してみました。同じ結果。彼らはtransition: perspective-origin-x 1s, perspective-origin-y 1s;にtransition: perspective-origin 1s;速記をマップしないのSafariのバグ、あるかもしれない

JSFiddle w/ WebKit

Answer 1

。

これらのプロパティを両方とも明確に設定すると、Safariでも機能します。

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>