Question

所以我有一块瓷砖。

我正在尝试根据鼠标中心方向翻转它们（例如：如果鼠标从底部进入，则图块向上翻转，如果鼠标从左侧进入则图块向右翻转）。问题出现了，因为您需要在转换瓷砖后将其旋转到正确的方向，然后才能以正确的方向进行旋转。

切换应该将所有瓷砖翻转到位置2，然后在悬停时它们可以反向旋转。

如果你查看我的脚本，我已经在mouseenter上添加了类，为我的方向提供了一个钩子。我试过用@keyframes尝试在它们旋转之前设置瓷砖的对齐方式，我无法让瓷砖在mouseout上重新旋转。我还使用了一种方法，它将瓷砖背面的旋转方向调整到正确的方向，然后在10ms后触发动画。但这似乎有些小问题。

我可能错过了其他任何建议吗？

<a href="#" class="toggle">Toggle</a>
<div class="grid">
    <div class="tile posone">
        <div class="front"><img src="http://placehold.it/250x175/00baff/ffffff" height="175" height="250" /></div>
        <div class="back"><img src="http://placehold.it/250x175/ffa800/ffffff" height="175" height="250" /></div>
    </div>
</div>

<script>

flip = { 
    init: function(){
        $('.toggle').on('click', flip.toggle);
        $('.tile').on('hover', flip.hover);
    },

    toggle: function(e){
        e.preventDefault();
        $('.tile').each(function(i, elm) {
                setTimeout(function(){
            flip.autoFlip($(elm));
        }, i*40);
        });
    },

    hover: function(e){
        if (e.type === 'mouseenter'){
            var dir = flip.getDir($(this), { x:e.pageX, y:e.pageY });
        }
        flip.flipOver($(this), e.type, dir);
    },

    flipOver: function($elm, type, dir){

            switch (dir) {
                case 0 :
                    $elm.addClass('top');   
                break;
                case 1 :
                    $elm.addClass('right'); 
                break;
                case 2 :
                    $elm.addClass('bottom');    
                break;
                case 3 :
                    $elm.addClass('left');  
                break;
                default :
                    $elm.removeClass('top right bottom left');
            }

            $elm.toggleClass('posone postwo');

    },

    autoFlip: function($elm){
        $elm.toggleClass('posone postwo');
    },

    getDir: function($elm, coord){
        var w = $elm.width(),
            h = $elm.height(),
            x = ( coord.x - $elm.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
            y = ( coord.y - $elm.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
            direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 )  % 4;
        return direction;
    }

}

$(document).ready(function() {
    flip.init();
});

</script>

Answer 1

不知何故，jsFiddle现在不会为我加载，但我会说不要轮换.front和.back，在悬停时轮换.tile。将.back旋转180度（从左侧悬停时rotateY，从右侧悬停时rotateX旋转，但没有转换。

使用基于鼠标中心方向的CSS3定向翻转图块，同时还使用切换默认翻转

1 个答案: