如何特别转换透视原点？

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>