<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>翻牌特效</title>

</head>

<style>

    div{

        position: absolute;

        transition: 1s;

    }

    .wai{

        width: 300px;

        height: 500px;

        background-color: red;

    }

    .wai div{

        backface-visibility: hidden;

        width: 100%;

        height: 100%;

    }

    .front{

        background-color: pink;

    }

    .back{

        background-color: gray;

        transform: rotateY(180deg);

    }

    .wai:hover{

        transform: scale(1.1);

    }

    .wai:hover .back{

        transform: rotateY(0deg);

    }

    .wai:hover .front{

        transform: rotateY(180deg);

    }

</style>

<body>

    <div class="wai">

        <div class="front"></div>

        <div class="back"></div>

    </div>

</body>

</html>

css 翻牌 翻转 3d翻转 特效的更多相关文章

  1. 基于css3的文字3D翻转特效

    一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="compo ...

  2. 基于html5顶部导航3D翻转展开特效

    基于html5顶部导航3D翻转展开特效是一款基于jQuery+HTML5实现的3D翻转网站导航菜单代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <header cla ...

  3. 纯CSS 3D翻转一个面（翻转导航菜单 立方体）

    在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...

  4. css3 翻牌(rotate) 以及翻转 导致边缘锯齿解决 方法

     主要知识点:rotate旋转以及  outline透明的像素消除(明显降低)火狐旋转是产生的 锯齿  首先看结构: <li class="flip-container " ...

  5. CSS3——3D翻转相册

    transform属性和transition过渡属性,结合jQuery代码实现翻转功能. <!DOCTYPE html> <html lang="en"> ...

  6. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

  7. CSS3—3D翻转

    本案例主要是css3和html5,不会js也可以做动画◕.◕ 一.首先看下主要需要的样式: perspective transform transition position classList 就这 ...

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

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

  9. 一款纯css3实现的图片3D翻转幻灯片

    之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览   源码下载 实现的代码. ht ...

随机推荐

  1. js21---单体（单例）模式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. js插件---放大镜如何使用

    js插件---放大镜如何使用 一.总结 一句话总结:一张高清图片被用了两次,一次做缩略图,一次做放大后显示用的的图片(其实这个图片就是高清图片本身,而且是部分) 14 <figure class ...

  3. count 变量的使用

    count:统计出现的次数,当某种情况发生时,执行 +1 的动作,+1 的动作常置于循环体内.基本结构如下: count = 0 while count < vnum and **: ... c ...

  4. 1.26 Python知识进阶 - 继承

    继承 继承(Inheritance)是面向对象的程序设计中代码重要的主要方法.继承是允许使用现有类的功能,并在无需重新改写原来的类的情况下,对这些功能进行扩展.继承可以避免代码复制和相关的代码维护等问 ...

  5. 基于jQuery的一组图片的滚动

    css: .displayB{display:block;}.fl{float:left;}.fr{float: right;}.posAb{position: absolute;}.posRe{po ...

  6. BZOJ4044: [Cerc2014] Virus synthesis（回文树+DP）

    Description Viruses are usually bad for your health. How about fighting them with... other viruses? ...

  7. listctrl调整表头高度

    CListCtrl派生类下CMyListCtrl.h class CMyListCtrl :public CListCtrl { public: // 设置表头高度 void SetHeadHeigh ...

  8. Sql Server服务 远程过程调用失败

    问题: 今天SQL数据库登录不上了,然后想启动Sql实例,却发现如下问题(配置环境:win7旗舰版x64,SqlServer2008R2,同时安装VS2012): 以前出现过这个问题,那时候是因为把实 ...

  9. DriverModule_01

    最小驱动模块: 最简单的Makefile 无配置文件 最小驱动的四部分 头文件 声明模块信息 模块驱动的入口.出口 功能区 关于这个头文件的分析: linux头文件的位置,例如#include< ...

  10. 修饰器&高阶组件

    一.修饰器 1.类的修饰 修饰器是一个函数,用来修改类的行为 function testable(target) { target.isTestable = true; } @testable cla ...