CSS 3d转换卡翻转动画-插件特效-星河码客

本教程中,我们将卡片翻转效应应用于一组缩略图画廊。我们只是想展示一个简单的方法来使用它。一件事,CSS 3 d转换还没有一个成熟的标准,只有高级版本浏览器支持它。HTML

CSS.thumb { display:block; width:200px; height:140px; position:relative; margin-bottom:20px; margin-right:20px; float:left;} .thumb-wrapper { display:block; width:100%; height:100%; } .thumb img { width:100%; height:100%; position:absolute; display:block; } .thumb .thumb-detail { display:block; width:100%; height:100%; position:absolute; background:#fff; } /** Without CSS3 Scroll Up Effect*/.thumb.scroll { overflow: hidden;} .thumb.scroll .thumb-detail { bottom:-280px; }最后是CSS的CSS 3 d转换.thumb.flip { perspective:800px;} .thumb.flip .thumb-wrapper { transition: transform 1s; transform-style: preserve-3d; } .thumb.flip .thumb-detail { transform: rotateY(-180deg); } .thumb.flip img, .thumb.flip .thumb-detail { backface-visibility: hidden; } .thumb.flip .flipIt { transform: rotateY(-180deg); }JavaScript$(function () { // Utilize the modernzr feature support class to detect CSS 3D transform support if ($('html').hasClass('csstransforms3d')) { // if it's supported, remove the scroll effect add the cool card flipping instead $('.thumb').removeClass('scroll').addClass('flip'); // add/remove flip class that make the transition effect $('.thumb.flip').hover( function () { $(this).find('.thumb-wrapper').addClass('flipIt'); }, function () { $(this).find('.thumb-wrapper').removeClass('flipIt'); } ); } else { // CSS 3D is not supported, use the scroll up effect instead $('.thumb').hover( function () { $(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic'); }, function () { $(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic'); } ); }});

CSS 3d转换卡翻转动画

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»