参考:http://www.zhangxinxu.com/study/201210/css3-animate-flip-example.html
图片我就不放了,图片宽高设置成和DIV宽高一样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(function(){ var eleBack = null, eleFront = null, // 翻转图片 eleList = $(".list"); // 确定前面与后面元素 var funBackOrFront = function() { eleList.each(function() { if ($(this).hasClass("out")) { eleBack = $(this); } else { eleFront = $(this); } }); }; funBackOrFront(); $("#box").bind("click", function() { // 切换的顺序如下 // 1. 当前在前显示的元素翻转90度隐藏, 动画时间225毫秒 // 2. 结束后,之前显示在后面的元素逆向90度翻转显示在前 // 3. 完成翻面效果 eleFront.addClass("out").removeClass("in"); setTimeout(function() { eleBack.addClass("in").removeClass("out"); // 重新确定正反元素 funBackOrFront(); }, 225); return false; }); }) </script> <style> img { border: 0; vertical-align: bottom; } .box { width: 240px; height: 319px; padding-top: 30px; padding-bottom: 30px; margin-left:auto; margin-right: auto; position: relative; border-radius: 40px; } .list { position: absolute; } .list img { border-radius: 2px; } .viewport-flip { -webkit-perspective: 1000px; perspective: 1000px; position: absolute; } .flip { -webkit-backface-visibility:hidden; -webkit-transform:translateX(0); backface-visibility:hidden; transform:translateX(0); } .flip.out { -webkit-transform: rotateY(-90deg) scale(.9); -webkit-animation-name: flipouttoleft; -webkit-animation-duration: 175ms; transform: rotateY(-90deg) scale(.9); animation-name: flipouttoleft; animation-duration: 175ms; } .flip.in { -webkit-animation-name: flipintoright; -webkit-animation-duration: 225ms; animation-name: flipintoright; animation-duration: 225ms; } @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-90deg) scale(.9); } } @keyframes flipouttoleft { from { transform: rotateY(0); } to { transform: rotateY(-90deg) scale(.9); } } @-webkit-keyframes flipintoright { from { -webkit-transform: rotateY(90deg) scale(.9); } to { -webkit-transform: rotateY(0); } } @keyframes flipintoright { from { transform: rotateY(90deg) scale(.9); } to { transform: rotateY(0); } } </style> </head> <body> <div id="box" class="box viewport-flip" title="点击翻面"> <a href="#" class="list flip out"><img src="front.jpg" alt="图片正面" /></a> <a href="#" class="list flip"><img src="back.jpg" alt="图片背面" /></a> </div> </body> </html>
相关推荐
animate.css动画属性制作css3动画效果
Animate.css拥有多款文字特效的css3动画库效果源码,是一段拥有数十款文字特效的css3动画库代码,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出...
Animate.css是某位大牛写好的动画效果集合,需要的时候可以直接下载导入到项目中,在需要的元素上添加相关的类即可使用相对应的动画效果。
Animate.css是一个超强的CSS3动画库,它使用简单只需要将相关效果对应的class加入页面元素中,就能实现翻转、滑动、旋转等等复杂超炫的跨浏览器的动画效果,让开发这制作页面动画变得非常简单,本文给大家介绍基于...
jquery实例超炫animate动画效果 demo是原版,效果还是相当炫丽 后面自制了两个
animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了...
Animate.css内置了很多典型的css3动画,兼容性好使用方便。 演示地址:http://www.jq22.com/jquery-info819
animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入、左右摇摆动画等等。使用animate.css也非常简单,你可以给页面上的任意元素,特别是文字添加各种神奇的动画特效。
效果描述: 这个严格的说起来,不算是什么特效 只能说是CSS3里的一个属性而已 这个属性可以让你的图片呈现出翻转的效果 使用方法: 只要给对应的图片加上附件中CSS属性即可
animate css最新4.1.1文件打包下载 制作前端动画效果,GitHub搬运方便下载
前端项目-css3-animate-it,css3/jquery插件,用于在元素进入视图时对其进行动画处理
animate.css banner图html css3
css3-animate动画特效大全 主要以css3 的@keyframes 规则来创建动画。
css动画效果 wow插件需要的wow.min.js和animate.css
实现效果: 基于animate.css和原生JS实现的鼠标滚动动画效果,挺不错的CSS3动画效果,基于CSS动画插件 animate.css实现,animate.css拥有众多的动画特效而且是开源的,大家到官网看看吧。
CSS3动画库
最新animate.css文件,解压后将里面的animate.css放入vscode即可
CSS3-Animate使用 HTML5 / CSS3 制作的动画效果~