Как конкретно перейти к перспективному происхождению?

1

Я не могу представить себе перспективное происхождение, не используя 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 для повышения производительности. Что я делаю неправильно во втором наборе инструкций?

РЕДАКТИРОВАТЬ

Я попытался использовать расширения WebKit в JavaScript. Тот же результат.

JSFiddle w/WebKit

  • 0
    Оба работают в моем Chrome. какой браузер вы используете.?
  • 0
    Ах хорошо. Я использую Safari. Может быть, мне нужно использовать свойства webkit в JavaScript. Я попробую это сейчас.
Показать ещё 1 комментарий
Теги:

1 ответ

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>
  • 0
    Ах да Я даже не знал, что вы можете анимировать оси отдельно. Достаточно хорошо для меня. Благодарю.
  • 0
    @DaiBu, кажется, что он не поддерживается в FF, а в chrome он все еще находится под префиксом -webkit- . Кажется, только Safari имеет встроенную функцию, но они, возможно, выпустили ее слишком рано.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню