利用hover控制动画,一个从翻面向正面翻,一个从正面向反面翻。

利用:backface-visibility: hidden;控制反面的元素不显示。

不支持的浏览器直接切换层级换图。

<!DOCTYPE html>
<html>
<head>
<title>css3双面翻转</title>
</head>
<style type="text/css">
.game {
display: block;
width: 320px;
height: 200px;
padding-top: 100px;
margin:0 auto;
}
.game a {
display: block;
width: 320px;
height: 200px;
position: relative;
-webkit-transform: perspective(1000px);
-webkit-transform-style: preserve-3d;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform: perspective(1000px);
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.game a:hover {
z-index: 20;
}
.game a:hover .back {
z-index: 10;
}
.game img {
vertical-align: top;
} .game .back {
cursor: pointer;
backface-visibility: hidden;
width: 320px;
height: 200px;
background: #000;
position: absolute;
top: 0px;
left: 0px;
}
.game a:hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg)
display:block;
}
.game a:hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg)
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
-ms-transition: 0.6s;
transition: 0.6s;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
display: table;
background-size: cover;
background-position: center
}
.front {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg)
}
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg)
} </style>
<body>
<div class="game">
<a class="new_game" href="javascript:void(0);">
<div class="back">
<div class="text"><img src="http://i0.cy.com/wf/pic/2015/0902/main_a3.jpg" width="320" height="200" ></div>
<!--<p>8月7日超能内测 </p>-->
</div>
<div class="front">
<div class="text"><img src="http://i0.cy.com/wf/pic/2015/0902/main_a2.jpg" width="320" height="200" ></div>
</div>
</a>
</div>
</body>
</html>

预览

css3的3D翻牌效果的更多相关文章

  1. css3之3D翻牌效果

      最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...

  2. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

  3. 使用JS与CSS3的翻转实现3D翻牌效果

    之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...

  4. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

  5. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  6. CSS3之3D立方体效果

    下面代码可实现3D立方体,比较好理解,就是让每个面先平移到指定位置,然后旋转90度 <!DOCTYPE html> <html lang="en"> < ...

  7. CSS3 实现3D旋转木马效果

    基本原理: 1.首先我们需要让图片能旋转的效果,我们让所有图片绝对定位(position:absolute),共用一个中心点. 2.对于舞台我们加一个视距,比如下面的demo是 perspective ...

  8. Html5+css3实现3D转动效果

    由于最近一直在忙着筹划去上海工作的事情,所以博客更新的速度也就慢了下来.前几天面试了几家公司,也拿到几份offer,总结了一些面试中遇到的问题,最近整理一下会和大家一起分享.今天呢,就和大家分享一下前 ...

  9. css3图片3D翻转效果

    点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...

随机推荐

  1. [Effective C++ --027]尽量少做转型动作

    引言                                                                                                   ...

  2. javascript笔记03:易犯错的比较运算

    1.比较两个值是否相等的常见运算: " //false == "" //true == " //true false == "false" ...

  3. JAVA_Reflection

    package com.qf.reflection; import java.lang.reflect.Constructor; import java.lang.reflect.Field; imp ...

  4. C语言内存管理

    作用域: 1.代码块儿作用域: 注意的是:这里面{}就代表一个代码块儿,里面的东西是独立的,不可被其他地方访问的. 2.函数作用域 3.文件作用域 先提一下 在当前有一个文件,main.c 还有一个文 ...

  5. Hibernate学习笔记--------2.一多|多多的CRUD

    一.一多关系 例如用户(Tb_User)和订单(Tb_Order)之间,一个用户对应了多个订单,多个订单对应一个用户. 除了基本的配置外,需要在用户类(单方)中添加订单的集合同样需要get/set方法 ...

  6. javascript原型链简单的理解

    在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[prototype],我们通常称之为原型.原型的值可以是一个对象,也可以是null.当然也可能是一个值,如果它的 ...

  7. 关于Eclipse中的快捷键占用的解决.

    刚进公司用的之前离职员工的电脑,打开Eclipse经常用的一个alt+/ 内容提示快捷键就是不好使. 让同事帮忙之后才发现原因. 在eclipse中快捷键设置是在  windows---->pr ...

  8. 并发容器之CopyOnWriteArrayList(转载)

    Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这个内容的时候,才会真正把内容Copy出去形成一个新的内容然后再改, ...

  9. Android开发了解——ODEX

    ODEX是安卓上的应用程序apk中提取出来的可运行文件,即将APK中的classes.dex文件通过dex优化过程将其优化生成一个·dex文件单独存放,原APK中的classes.dex文件会保留.这 ...

  10. js 拼接参数

    htmlString += "<td><button type=\"button\" onclick=\"artdel('"+pro ...