如何特別轉換透視原點？

Question

我似乎無法使用all屬性爲transition屬性創建透視來源的動畫。

此代碼工作在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來提高性能。我在第二套指令中做了什麼錯誤？

編輯

我試着用在JavaScript WebKit的擴展。同樣的結果。

JSFiddle w/ WebKit

Answer 1

這可能是在Safari中的錯誤，他們沒有在transition: perspective-origin 1s;速記映射到transition: perspective-origin-x 1s, perspective-origin-y 1s;。

清楚地設置這兩個屬性在Safari中也能正常工作。 但Firefox和Chrome時，只有這兩個屬性都設置不一樣，所以你真正需要他們三個：

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>