Fatal编程技术网
  • javascript/
  • Javascript 如何在三维空间中旋转元素而不在页面下方倾斜？

Javascript 如何在三维空间中旋转元素而不在页面下方倾斜？

javascript jquery css safari

Javascript 如何在三维空间中旋转元素而不在页面下方倾斜？,javascript,jquery,css,safari,webkit,Javascript,Jquery,Css,Safari,Webkit,我试图实现CSS 3效果，当你点击一组图像中的一个图像时，它会扩展到所有可用区域并同时翻转 我能够做到这一点的方法是克隆元素并将其绝对定位在原始元素的顶部，然后对其进行转换。在下面的代码中，克隆图像被分配了类clone和activated 一切都很好 但是，如果我使用flip all按钮（添加origflipped类，该类具有rotateY（180度），因此现在显示的是背面），预先翻转一系列图像中的所有图像，然后尝试相同的效果（展开，现在将rotateY（0度）转到正面），动画会产生意想不到的副

我试图实现CSS 3效果，当你点击一组图像中的一个图像时，它会扩展到所有可用区域并同时翻转

我能够做到这一点的方法是克隆元素并将其绝对定位在原始元素的顶部，然后对其进行转换。在下面的代码中，克隆图像被分配了类
clone
和
activated

一切都很好

但是，如果我使用flip all按钮（添加
origflipped
类，该类具有rotateY（180度），因此现在显示的是背面），预先翻转一系列图像中的所有图像，然后尝试相同的效果（展开，现在将rotateY（0度）转到正面），动画会产生意想不到的副作用

看起来，在执行rotateY转换时，旋转效果中的一半图像会在3d空间中的页面下方，位于其他图像的后面，并且看不见

那么，如何从rotateY（180度）旋转（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>


#目标区域。面部{
-webkit背面可见性：隐藏；
位置：绝对位置；
}
#目标区域。面部图像{
垂直对齐：中间对齐；
身高：100%；
}
#目标区域。正面。背面{
-webkit变换：旋转（180度）；
}
#目标区域。卡{
浮动：左；
左边距：5px；
-webkit变换样式：保留-3d；
-webkit转换属性：全部；
-webkit转换持续时间：1s；
-webkit过渡计时功能：易用；
}
#目标区域。卡片。原始显示{
-webkit转换属性：无；
可见性：隐藏；
}
#目标区域。卡。开口{
-webkit变换：旋转（180度）；
}
#target_area.card.clone{
浮动：无；
-webkit盒阴影：0px 2px 6px rgba（0,0,0,0.5）；
}
#目标区域。卡。克隆。已激活{
-webkit变换：旋转（180度）；
}
#target_area.card.clone.origflipped{
-webkit变换：旋转（180度）；
}
#目标区域。card.clone.origflipped.activated{
-webkit变换：旋转（0度）；
}
$（文档）.ready（函数（）{
var ALL_卡=[
['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宽度=100；
对于（变量i=0；i
嗯，在chrome 5.0.375.99中测试这一点对我来说很好，

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

另外，虽然我相信你知道这一点，但它在firefox/ie中完全被破坏了（但这是因为你使用的是-webkit样式

我正在safari 5.0上尝试这一点