参考：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库包含了一系列预先定义的动画类别，涵盖了诸如淡入淡出、滑动、旋转、缩放等多种效果。这些动画可以应用于页面加载、用户交互、导航过渡等场景，极大地提升了用户体验和网页的视觉吸引力。 在Animate....
Animate.css 是一个强大的开源CSS动画库，它提供了一系列预先定义好的动画效果，使得开发者无需从零开始编写复杂的CSS代码，就能轻松实现各种炫酷的动态效果。这个库被广泛应用于网页设计，提升用户体验，吸引用户...
Animate.css 是一个强大的预设CSS3动画库，它为开发者提供了丰富的动画效果，极大地简化了在Web项目中添加动态效果的工作。这个库包含了各种各样的动画类型，如淡入淡出、滑动、旋转、缩放等，适用于按钮、图标、...
animate.css 是由 Daniel Eden 开发的一个 CSS3 动画库，它包含了大量的动画效果，如淡入淡出、旋转、滑动等。每个动画都是一个独立的 CSS 类，可以直接应用到 HTML 元素上。通过简单地将相应的类名添加到元素中，就...
标题中的“懒人原生纯CSS3静态图片翻转效果”指的是使用CSS3的一个特性来实现图片的翻转效果，而无需借助JavaScript等其他编程语言。这种方法特别适合那些希望快速实现简单动态效果而又不想深入复杂代码的开发者。...
Animate.css拥有多款文字特效的css3动画库效果源码，是一段拥有数十款文字特效的css3动画库代码，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出...
animate.css包含了各种各样的动画效果，如淡入淡出、滑动、旋转、放大缩小、震动等，适用于各种网页元素，如图片、按钮、导航菜单、标题等。这些动画可以用于： - **页面加载**：通过加载动画提升用户体验，让用户...
【animate.css】提供的动画效果包括淡入淡出、滑动、旋转、缩放等多种效果。例如，`fadeIn`表示元素从不可见逐渐变为可见，`bounceIn`则是元素弹跳进入视线。开发者可以根据需求选择合适的动画效果，并通过HTML元素...
本篇文章将详细讲解如何利用jQuery和CSS3实现五种不同的图片切换效果，包括爆炸效果、翻转效果、扭曲效果、立方体效果以及翻页效果。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作...
"animate.css"则是一个预定义的CSS3动画库，包含了大量的动画效果，如淡入淡出、滑动、旋转等。开发者可以通过简单地添加类名到HTML元素上，就能轻松实现各种炫酷的动画效果。这些动画效果都是基于现代浏览器支持的...
总结起来，"jquery css3按钮控制图片螺纹旋转切换特效"是一个结合了jQuery动态控制和CSS3视觉效果的项目。通过合理利用这两个技术，我们可以创建出具有独特视觉效果的图片展示方式，这不仅提升了网页的吸引力，还...
Animate.css是一个预定义的动画集合，支持各种炫酷的视觉效果，如翻转、滑动、旋转等，并且具有良好的跨浏览器兼容性。本文将深入探讨如何利用CSS3的Animate.css库来制作绚丽的动画效果。 首先，要使用Animate.css...
3. **添加动画类**：在选定元素上添加相应的 Animate.css 类，例如 `animated`（表示启用动画）和具体的动画效果类，如 `bounceInDown`（表示向下弹入的动画）。 4. **触发动画**：通过 JavaScript 或者 CSS 伪类...
CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它引入了许多新的特性和功能，其中动画效果是其一大亮点。在CSS3中，我们可以利用`@keyframes`规则创建复杂的动画特效，这使得网页交互更加生动、吸引...
"jQuery+CSS3 3D旋转效果"就是一种利用这两种技术实现的创新视觉效果，它可以为网站增添丰富的维度和动感，使得用户界面更加吸引人。下面我们将深入探讨jQuery和CSS3在3D旋转效果中的应用以及如何实现这一效果。 ...
总结来说，Animate.css是一个强大的CSS3动画库，能够帮助开发者快速创建丰富的视觉效果。这个"animate.css-4.1.1.zip"文件是Animate.css的最新版本，解压并引入到项目中，你就可以轻松地为网页元素添加各种动画效果...
animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了...
总的来说，这个资源包提供了一个基于CSS3 3D和jQuery的图片展示效果实例，对于学习和实践这些技术非常有帮助。通过研究和修改其中的代码，开发者可以深入了解CSS3 3D转换、阴影效果以及jQuery动画的运用，提升Web...
【前端项目-css3-animate-it.zip】是一个专注于前端开发的资源包，主要利用CSS3和jQuery技术来实现元素在进入浏览器视口时的动画效果。这个项目对于提升网站用户体验和视觉吸引力有着显著的作用，尤其适用于现代网页...
在本文中，我们将深入探讨如何使用CSS3实现一个超酷的3D图片旋转效果，尤其关注如何让图片在鼠标悬停时实现360度旋转，并兼容Chrome和Firefox浏览器。CSS3是层叠样式表（Cascading Style Sheets）的一个重要升级版本...