[英]The Google card's “Flip and Grow” effect
I have been doing some research on how to create a flip and grow effect like Google card does (click on any card): 我一直在研究如何创建像Google卡一样的翻转和增长效果(点击任意卡片):
http://www.google.com/landing/now/#cards/restaurant-reservations http://www.google.com/landing/now/#cards/restaurant-reservations
All resources I found is about flipping a card with front and back of same size but this is not what I'm looking for. 我发现的所有资源都是关于翻转相同尺寸的正面和背面的卡片,但这不是我想要的。
Any feedback will be hugely appreciated. 任何反馈都将非常感激。
Both of the answers posted here are good generic css flippers but they don't address the core of the question which is "how does Google do it?". 这里发布的两个答案都是很好的通用css脚本,但它们没有解决问题的核心问题,即“Google如何做到这一点?”。 The problem is that google minifies and therefore obfuscates their code which makes it tough to tell exactly whats going on but using a DOM inspector you can get a pretty basic idea.
问题是,谷歌缩小并因此混淆了他们的代码,这使得很难确切地说明发生了什么,但使用DOM检查器你可以得到一个非常基本的想法。 This is the abstract:
这是摘要:
Demo: http://jsfiddle.net/jwhazel/AaU6v/11/ 演示: http : //jsfiddle.net/jwhazel/AaU6v/11/
(Developed in Chrome, may need some vendor prefixes for other browsers) (在Chrome中开发,可能需要其他浏览器的一些供应商前缀)
HTML 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 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 使用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)'
});
}
}
});
your code is here ! 你的代码在这里! clickFLIPgrove
clickFLIPgrove
You can scale size of a div by css property called transform:scale(2,2); 您可以通过名为transform:scale(2,2)的css属性来缩放div的大小; it will double the size of your element refer this link for all css effects: cssAnimation
它将使元素的大小加倍,请参阅此链接以获取所有css效果: cssAnimation
I have created flip effect on hover: 我在悬停上创建了翻转效果:
html HTML
<div class="cards"></div>
css 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(add Jquery 2.1.0) javascript(添加Jquery 2.1.0)
$(".cards").click(function(){
$(this).toggleClass("flip");
});
Try this jsFiddle 试试这个jsFiddle
Base on this, make a 3d transform and left offset in transition, 在此基础上,进行三维变换并在过渡时保留偏移量,
-webkit-transform-style:preserve-3d;
-webkit-transform:rotateY(0deg);
-webkit-transition:-webkit-transform 0.25s , left 0.25s;
Use the css3 transform and transition. 使用css3转换和转换。 Hope this can work for you.: )
希望这对你有用。)
maybe you like this one. 也许你喜欢这个。 check out my code using keyframes.
使用关键帧检查我的代码。
https://jsfiddle.net/jariesdev/y7Lz3mm0/ https://jsfiddle.net/jariesdev/y7Lz3mm0/
html: HTML:
<div id="logo">
<a>
<img src="http://fallbacks.carbonads.com/nosvn/fallbacks/2053cd7a29af8f37381467e04521a14e.png">
</a>
</div>
css: 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);}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.