如何旋转元素而不在3d空间中浸入页面下方？-Java 学习之路

我正在尝试实现CSS 3效果，当您单击图像库中的图像时，它会扩展到所有可用区域并同时翻转 .

我能够实现这一目标的方法是克隆元素并将其绝对定位在原始元素之上然后对其进行转换 . 在下面的代码中，为克隆的映像分配类 clone 和 activated .

一切都很好 .

但是，如果我预先翻转一系列图像中的所有图像，使用全部翻转按钮激活（添加 origflipped 类，其中有旋转Y（180度），所以现在后面显示）然后尝试相同的效果（展开和现在rotateY（0deg）到正面），动画以某种方式出现意想不到的副作用 .

看起来当执行rotateY过渡时，旋转效果中的一半图像在3d空间中低于页面，在其他图像后面并且在视野之外 .

那么我如何从rotateY（180度）旋转Y（0）而不让其中一半的图像漂浮在其他东西下面？

<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

嗯，测试这对我在chrome 5.0.375.99中工作得很好，
http://jsfiddle.net/Fhxb3/

所以我不确定你发的是什么，你用的是什么浏览器？

另外，虽然我确定你知道这一点，但它在firefox / ie中完全被破坏了（但这会导致你使用-webkit样式

回复于 2024-05-02T20:01:36+08:00

如何旋转元素而不在3d空间中浸入页面下方？

1 回答

相关问题