Как я могу повернуть Y элемент без погружения под страницу в трехмерном пространстве? - PullRequest
Новая
       13

Как я могу повернуть Y элемент без погружения под страницу в трехмерном пространстве?

1 голос
/ 19 июля 2010

Я пытаюсь добиться эффекта CSS 3, когда при нажатии на изображение в банке изображений оно расширяется до всей доступной области и одновременно переворачивается.

Способ, которым яудалось сделать это, клонировав элемент и расположив его поверх оригинала, а затем преобразовав его.В приведенном ниже коде клонированному изображению назначены классы clone и activated.

Все хорошо.

Однако, если я pre-flip , всеизображения в серии изображений, активируемые с помощью кнопки flip all (добавление класса origflipped, который имеет rotateY (180deg), поэтому теперь отображаются backs ), а затем попробуйте тот же эффект (разверните и сейчасrotateY (0deg) в сторону front ), анимация каким-то образом имеет непредвиденные побочные эффекты.

Похоже, что при выполнении перехода rotateY половина изображения в эффекте поворота опускается ниже страницы в трехмерном пространстве, позади других изображений и вне поля зрения.

Так как же я могу повернуть Y (0) от rotateY (180 градусов), не имея половины изображения, плавающего под другими вещами? 

<html>
<head>

<style>
    #target_area .face {
        -webkit-backface-visibility: hidden;
        position: absolute;
    }

    #target_area .face img {
        vertical-align: middle;
        height: 100%;
    }

    #target_area .face.back {
        -webkit-transform: rotateY(180deg);
    }

    #target_area .card {
        float: left;
        margin-left: 5px;

        -webkit-transform-style: preserve-3d;
        -webkit-transition-property: all;
        -webkit-transition-duration: 1s;
        -webkit-transition-timing-function: ease-in;
    }

    #target_area .card.origshown {
        -webkit-transition-property: none;
        visibility: hidden;
    }

    #target_area .card.origflipped {
        -webkit-transform: rotateY(180deg);
    }

    #target_area .card.clone {
        float: none;
        -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
    }

    #target_area .card.clone.activated {
        -webkit-transform: rotateY(180deg);
    }

    #target_area .card.clone.origflipped {
        -webkit-transform: rotateY(180deg);

    }

    #target_area .card.clone.origflipped.activated {
        -webkit-transform: rotateY(0deg);
    }
</style>






<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>

<script>

$(document).ready(function () {

    var ALL_CARDS = [
        ['http://twitpic.com/show/thumb/26n3ms', 'http://twitpic.com/show/thumb/26n3mr'],
        ['http://twitpic.com/show/thumb/26n3ma', 'http://twitpic.com/show/thumb/26n3mq'],
        ['http://twitpic.com/show/thumb/26n3mb', 'http://twitpic.com/show/thumb/26n3mt'],
        ['http://twitpic.com/show/thumb/26n3mc', 'http://twitpic.com/show/thumb/26n3mu'],
        ['http://twitpic.com/show/thumb/26n3md', 'http://twitpic.com/show/thumb/26n3mv'],
    ];

    var width = 100;

    for (var i = 0; i < ALL_CARDS.length; i++) {

        $(document.createElement('div'))
            .addClass("card")
            .append(
                $('<img src="' + ALL_CARDS[i][0] + '" />')
                    .addClass("face front")
                )
            .append(
                $('<img src="' + ALL_CARDS[i][1] + '" />')
                    .addClass("face back")
                )
            .width(width)
            .height(width + 10)
            .appendTo($('#target_area'))
            .find('img').width('100%').height('100%')
            ;
    }


    $('#target_area .card')
        .click(function (e) {
            e.preventDefault();

            var original = $(this);
            var proxy = $(this).clone();
            var body = $('body');

            original.addClass("origshown");

            proxy
                .css({
                    'position': 'absolute',
                    'top': this.offsetTop,
                    'left': this.offsetLeft - 5
                })
                .click(function () {
                    original.removeClass("origshown");
                    $(this).remove();
                })
                .addClass("clone")
                .appendTo($('#target_area'))
                ;

            var border_width = 10;

            proxy
                .css({
                    'background-color': 'white',
                    'top': border_width,
                    'left': border_width,
                    'height': body.height() - (2 * border_width),
                    'width': body.width() - (2 * border_width),
                    })
                .addClass('activated')
                ;


        });

    $('#flip_all').click(function (e) {
        e.preventDefault();
        $('.card').toggleClass('origflipped');
    });
});

</script>
</head>
<body>

<div id="target_area"></div>
<input type="button" value="flip all" id="flip_all" />

</body>
</html>

1 Ответ

0 голосов
/ 19 июля 2010

Хм, тестирование у меня нормально работает в chrome 5.0.375.99,
http://jsfiddle.net/Fhxb3/

поэтому я не уверен, что вы выдаете, какой браузер вы используете?

также, хотя я уверен, что вы это знаете, он полностью сломан в Firefox / т.е. (но это вызывает использование стилей -webkit

...