利用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. unity3D Socket连接C#server出现unity3D编辑器再次启动连接 unity3D编辑器马上卡死

    unity3D Socket与C#server第一次连接时通讯正常.客服端段关闭后.unity3D编辑器再次启动连接 unity3D编辑器马上卡死 原因是Socket处于异步状态,而异步线程是不受Un ...

  2. dos常用文件操作命令

    1.DIR 含义: 显示指定目录下的文件和子目录列表 类型: 内部命令 格式: DIR[drive:][path][filename][/p][/w][/A[[:]attributes]][/O[[: ...

  3. java_泛型，设置类型通配符的上限

    package ming; import java.util.ArrayList; import java.util.Collection; import java.util.List; class ...

  4. STC89C52单片机内部EEPROM驱动

    STC89C52单片机自身带有4K的存储空间,分为8个扇区,每个扇区512字节,第一扇区起始地址为:0x2000, 结束地址为:21FF, 第八扇区起始地址为0x2E00,结束地址是2FFF #inc ...

  5. 快递查询API接口对接方法

    各类接口 快递查询API有即时查询和订阅查询两种,即时是请求即返回数据,订阅则是订阅快递单号到接口,有物流轨迹更新则全量返回数据.目前常用的有快递鸟.快递100.快递网等. 快递鸟即时API可以查询3 ...

  6. 实现百度地图导航Demo的语音播报功能

    上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...

  7. C#实现插入排序法

    private int[] test_Insertion(int[] list) //插入排序 传入数组 3, 6, 2, 1, 9, 5, 4, 7 { ;i<list.Length;i++) ...

  8. SQL SERVER 主键约束

    主键约束: 遵循关系型模型中的第二范式.唯一的识别一条记录,不能为空. CREATE TABLE Persons ( Id_P int NOT NULL PRIMARY KEY, LastName v ...

  9. ###Canny边缘检测算子

    开源中国. #@date: 2014-06-20 #@author: gerui #@email: forgerui@gmail.com 一.一阶微分边缘算子 1. 一阶微分边缘检测算子也称梯度边缘算 ...

  10. ###Fedora下安装Retext

    使用Markdown. #@date: 2012-05-07 #@author: gr #@email: forgerui@gmail.com 因为习惯了Markdown的简单,所以需要在自己的Fed ...