2

Существует отличный плагин (http://www.zachstronaut.com/projects/rotate3di/#demos) для вращения элементов разметки. Использование плагина весьма просто и удобно

$('#something').click(function () {
    $(this).rotate3Di('-=180', 1000);
});

где #something - это тот элемент, который нужно вращать по клику. Однако возникла необходимость вращать элемент без подключения внешних библиотек, вроде jQuery. Как это сделать одним HTML5/CSS3/JavaScript?

3 ответа 3

4

Вариант №1 - изучить исходники http://www.zachstronaut.com/js/rotate3di.js и почитать инфу тут: http://www.zachstronaut.com/projects/rotate3di/#demos

Используется transform вкупе со skew и scale. Нужно будет переписать анимацию на setTimeout (а лучше на requestAnimationFrame + setTimeout) и просто можно заюзать формулы преобразований их исходника.

Вариант №2 - заняться изучением css3 более подробно: http://www.html5rocks.com/en/tutorials/3d/css/ http://www.netmagazine.com/features/20-stunning-examples-css-3d-transforms

0

Работай с матрицами напрямую, смотри доки к функциям OpenGL. Зачем? Затем, что там заодно описана матрица. Нужна матрица вращения? Пожалуйста - http://www.opengl.org/sdk/docs/man/xhtml/glRotate.xml , там есть матрица, хромом не отображает, так что юзай Oper'y.

Напиши функцию перемножения матрицы на вектор. Кстати, матрицы, описываемые на том сайте, ориентированы по столбцам (прошу прощения за некорректное выражение), т.е. чтобы получить результирующий вектор - необходимо именно матрицу умножить на вектор-столбец.

PS. Посмотрел, там не хватает перспективы! Так что матрицы - это ваше все. Цените их, пока они не обиделись.

0
<div class="cont">
    <div class="front">front</div>
    <div class="back">back</div>
</div>
    <style>
.cont {
    position: relative;
    width: 140px;
    height: 140px;
    background-color: #da3;
}
.cont .front,.cont .back{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
}
.cont .front{
    background-color: #eee;
    display: block;
    z-index: 1001;
}
.cont .back{
    background-color: #222;
    display: block;
    z-index: 1000;
}
.cont:hover .front{
    -webkit-animation-name:'rotate3dfront';
    -webkit-animation-duration:0.5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-direction:normal;
    -webkit-animation-iteration-count:1;
    visibility: hidden;
}
.cont:hover .back{
    -webkit-animation-name:'rotate3dback';
    -webkit-animation-duration:1s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-direction:normal;
    -webkit-animation-iteration-count:1;
}
@-webkit-keyframes rotate3dfront{
        0%{ 
            -webkit-transform: skew(0deg, 0deg) scale(1, 1);
            visibility: visible;
        }
        100%{
            -webkit-transform: skew(0deg, 90deg) scale(0, 1);
            visibility: visible;
        }
}
@-webkit-keyframes rotate3dback{
        0%{
            -webkit-transform: skew(0deg, 0deg) scale(1, 1);
        }
        50%{
            -webkit-transform: skew(0deg, 90deg) scale(0, 1);
        }
        100%{
            -webkit-transform: skew(0deg, 180deg) scale(1, 1);
        }
}
</style>

Для chrome пример : http://jsfiddle.net/zNvP6/

2
  • Работает только в Chrome. В остальных браузерах, даже в Safari - полный ноль.
    – Deonis
    13 июл 2012 в 18:53
  • 1
    учитывая, что кроме -webkit других префиксов нету, не удивительно
    – Spectre
    14 июл 2012 в 15:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.