Я не могу представить себе перспективное происхождение, не используя 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>
Я бы хотел избежать использования all
для повышения производительности. Что я делаю неправильно во втором наборе инструкций?
РЕДАКТИРОВАТЬ
Я попытался использовать расширения WebKit в JavaScript. Тот же результат.
Это может быть ошибка в 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>
-webkit-
. Кажется, только Safari имеет встроенную функцию, но они, возможно, выпустили ее слишком рано.