谷歌卡的“翻转和增长”效果

Question

我一直在研究如何创建像Google卡一样的翻转和增长效果（点击任意卡片）：

http://www.google.com/landing/now/#cards/restaurant-reservations

我发现的所有资源都是关于翻转相同尺寸的正面和背面的卡片，但这不是我想要的。

任何反馈都将非常感激。

Answer 1

这里发布的两个答案都是很好的通用css脚本，但它们没有解决问题的核心问题，即“Google如何做到这一点？”。 问题是，谷歌缩小并因此混淆了他们的代码，这使得很难确切地说明发生了什么，但使用DOM检查器你可以得到一个非常基本的想法。 这是摘要：

• 构建一个包含front和back子div的“clone”div，但默认情况下是隐藏的。 将它的css过渡属性设置为〜.5seconds，这样它所做的任何移动都将被设置为动画。
• 当用户点击网格中的卡片时，设置克隆使其与所点击的卡片的位置/尺寸相同，将点击的卡片的内容复制到前面的子元素中并将其设置为可见
• 使用visibility：hidden隐藏原始单击的卡片
• 此时，您现在已经在完全相同的位置克隆了最初点击的卡，但没有人可以说出来
• 将克隆div的顶部，左侧，高度，宽度的css设置为以屏幕为中心的预先计算的尺寸，同时还设置前/后儿童的transform：rotateY（）
• 此时，似乎div正在抬起，翻转，并移动/调整大小到屏幕中心。 由于原始卡仍然存在，因此留下了空白点，但是visibility：hidden允许它占用空间而不显示其内容
• 设置单击处理程序，以便当用户单击克隆卡外部时，顶部，左侧，高度，宽度，transform：rotateY（）css将重置为原始值，使其返回到位。
• 然后再次隐藏克隆并使原始卡可见

演示： http ： //jsfiddle.net/jwhazel/AaU6v/11/

（在Chrome中开发，可能需要其他浏览器的一些供应商前缀）

HTML

---

    <div class="cards">Generic Tile Card</div>

    <div id="cardClone">
        <div id="cloneFront">cardclone front</div>
        <div id="cloneBack">cardclone back</div>
    </div>

CSS

---

body {
    position: relative;
    font-family:Helvetica, Arial, Sans-serif;
    text-align:center;
}
.cards {
    margin:30px;
    width:200px;
    height:200px;
    background-color:#59A3FF;
    cursor:pointer;
    display:inline-block;
    overflow:hidden;
}
img {
    display:block;
    width:80%;
    height:auto;
    margin:0 auto
}
#cardClone {
    position:fixed;
    display:none;
    margin:30px;
    width:200px;
    height:200px;
    -webkit-transition:.6s;
    transition:.6s;
    -webkit-transform-style::preserve-3d;
    transform-style:preserve-3d;
    z-index:99;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
#cloneFront, #cloneBack {
    backface-visibility: hidden;
    width:100%;
    height:100%;
    position:absolute;
    -webkit-transition:.6s;
    transition:.6s;
    overflow:hidden;
}
#cloneFront {
    z-index:100;
    background-color:#59A3FF;
    transform: translatez(0);
}
#cloneBack {
    transform:rotateY(-180deg);
    z-index:101;
    background-color:#aaa;
}

使用Javascript

---

//Cache the clone since we have to select it a couple of times
$clone = $('#cardClone');

//Set a global for the card we just clicked so we can track it
$lastelement = "";

//Set up an object for last clicked element so we know where to return to on collapse
lastelement = {
    'top': 0,
        'left': 0,
        'width': 0,
        'height': 0
};

//Set a flag to determine the current flip state of our clone
cloneflipped = false;


//Bind a handler to the clone so we can detect when the transition is done
$('#cardClone').on("transitionend", function (e) {
    if (e.target === e.currentTarget) {
        if (e.originalEvent.propertyName == 'top') {

            //Toggle the clone state
            cloneflipped = !cloneflipped;

            //Detect if our clone has returned to the original position and then hide it
            if (!cloneflipped) {
                $($lastelement).css('opacity', 1);
                $($clone).hide();
            } else {
                //Need to dynamically alter contents of the clone rear AFTER it animates? Do it here
                //$('#cloneBack').html('hi');
            }
        }
    }
});


$(".cards").click(function () {
    if (!cloneflipped) {
        //Cache clicked card
        $lastelement = $(this);

        //Store position of this element for the return trip
        //[hack: subtract 30 due to the margin of .cards in this demo]
        var offset = $lastelement.offset();
        lastelement.top = offset.top - 30 - $(document).scrollTop();
        lastelement.left = offset.left - 30;
        lastelement.width = $lastelement.width();
        lastelement.height = $lastelement.height();

        //BONUS: lets check to see if the clicked card is further to the left or the right of the screen
        //This way we can make the animation rotate inwards toward the center, google doesn't do this
        var rotatefront = "rotateY(180deg)";
        var rotateback = "rotateY(0deg)";
        if ((lastelement.left + lastelement.width / 2) > $(window).width() / 2) {
            rotatefront = "rotateY(-180deg)";
            rotateback = "rotateY(-360deg)";
        }


        //Copy contents of the clicked card into the clones front card
        $clone.find('#cloneFront').html($lastelement.html());


        //Show the clone on top of the clicked card and hide the clicked card
        //[hack: using opacity for hiding here, visibility:hidden has a weird lag in win chrome]
        $clone.css({
            'display': 'block',
                'top': lastelement.top,
                'left': lastelement.left
        });
        $lastelement.css('opacity', 0);

        //Need to dynamically alter contents of the clone rear BEFORE it animates? Do it here
        //$('#cloneBack').html('hi');

        //Flip the card while centering it in the screen
        //[hack: we have to wait for the clone to finish drawing before calling the transform so we put it in a 100 millisecond settimeout callback]
        setTimeout(function () {
            $clone.css({
                'top': '40px',
                    'left': '40px',
                    'height': '400px',
                    'width': $(document).width() - 140 + 'px'
            });
            $clone.find('#cloneFront').css({
                'transform': rotatefront
            });
            $clone.find('#cloneBack').css({
                'transform': rotateback
            });
        }, 100);
    } else {
        $('body').click();
    }
});


//If user clicks outside of the flipped card, return to default state
$('body').click(function (e) {
    if (cloneflipped) {
        if (e.target === e.currentTarget) {
            //Reverse the animation
            $clone.css({
                'top': lastelement.top + 'px',
                    'left': lastelement.left + 'px',
                    'height': lastelement.height + 'px',
                    'width': lastelement.width + 'px'
            });
            $clone.find('#cloneFront').css({
                'transform': 'rotateY(0deg)'
            });
            $clone.find('#cloneBack').css({
                'transform': 'rotateY(-180deg)'
            });
        }
    }
});

Answer 2

你的代码在这里！ clickFLIPgrove

您可以通过名为transform：scale（2,2）的css属性来缩放div的大小; 它将使元素的大小加倍，请参阅此链接以获取所有css效果： cssAnimation

我在悬停上创建了翻转效果：

hoverFLIP

HTML

---

  <div class="cards"></div>

CSS

---

  body{
    position: relative;
}
.cards{
    margin:30px;
    perspective: 500;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    -o-perspective: 500;
    width:200px;
    height:200px;
    background-color:#59A3FF;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    position:absolute;
    cursor:pointer;
    /* Animate the transitions */
    -webkit-transition:0.8s; text-align:center;
    -moz-transition:0.8s; text-align:center;
    -ms-transition:0.8s; text-align:center;
    -o-transition:0.8s; text-align:center;
    transition:0.8s; text-align:center;

}

.flip{
  transform:rotateY(180deg) scale(1.2,1.2);
  -webkit-transform:rotateY(180deg) scale(1.2,1.2);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  background-color:#FF5959;

}

javascript（添加Jquery 2.1.0）

---

  $(".cards").click(function(){
    $(this).toggleClass("flip"); 
});

Answer 3

试试这个jsFiddle

在此基础上，进行三维变换并在过渡时保留偏移量，

    -webkit-transform-style:preserve-3d;
    -webkit-transform:rotateY(0deg);
    -webkit-transition:-webkit-transform 0.25s , left 0.25s;

使用css3转换和转换。 希望这对你有用。）

Answer 4

也许你喜欢这个。 使用关键帧检查我的代码。

https://jsfiddle.net/jariesdev/y7Lz3mm0/

HTML：

<div id="logo">
    <a>
      <img src="http://fallbacks.carbonads.com/nosvn/fallbacks/2053cd7a29af8f37381467e04521a14e.png">
    </a>    
</div>

CSS：

#logo {
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
}

#logo a {
  display: inline-block;
}

#logo:hover a {
    animation-name: rotateThis;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function:ease-in-out;
}

@keyframes rotateThis {
    0% { transform:scale(0) rotateY(180deg) translateX(-100%);}
    /*60% { transform:scale(.5) rotateY(90deg) translateX(-50%); }*/
    100% { transform:scale(1) rotateY(360deg) translateX(0);}
}