<!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. 内存泄漏与指针悬挂&野指针介绍

    内存泄漏概念:内存泄漏时指动态申请的内存空间没有正常释放,但是也不能继续使用的情况. 例如: char *ch1; ch1 = new char('A'); char = *ch2 = new cha ...

  2. HTTP协议建立连接、通讯与关闭连接全过程

    为解决服务器TimeWait多的问题,了解了一下TCP/IP协议的连接过程.以访问一静态页面为例,从建立连接到访问拿到数据,然后关闭的整个过程.使用EtherPeek截图如下:   图首为一次交互过程 ...

  3. golang beego cache

    package main import ( "fmt" "github.com/astaxie/beego/cache" "time" ) ...

  4. js中event事件处理

    1. HTML事件  直接添加到HTML结构中 function show() { alert('hello'); } <body> <button id="btn&quo ...

  5. Maven学习总结（14）——Maven 多模块项目如何分工？

    一.开场白 使用Maven有段时间了,只能感慨真是个好东西,让我从传统模式体会到了严谨.规范.敏捷.方便的特性. 如果你懂Maven或许看过Juven翻译的<Maven权威指南>: 发个牢 ...

  6. Unity3D教程：静态调用C#的dll

    就像使用.net自带的那些程序集一样.加入Reference,然后使用就可以. 因为windows环境下的Unity编译脚本时,本质上还是生成.net程序集.并且其C#脚本编程事实上就是.net C# ...

  7. 发送 email 过程

    发送 email 过程 SMTP基本命令集: 命令 描述 ---------- HELO 向服务器标识用户身份发送者能欺骗,说谎,但一般情况下服务器都能检测到. MAIL 初始化邮件传输 mail f ...

  8. 右键菜单→新建→BAT 批处理文件

    目的:以前编写BAT,通常新建一个文本,然后另存为 .bat,比较麻烦,那么如何右键新建菜单里添加新建批处理文件呢? 代码如下: @echo offcd /d %temp%echo Windows R ...

  9. hunnu11550:欧拉函数

    Problem description   一个数x的欧拉函数Φ(x)定义为全部小于x的正整数中与x互质的数的数目,如小于5且和5互质的数有1.2.3.4,一共4个,故Φ(5)=4. 对于随意正整数x ...

  10. STL_算法_删除(unique、unique_copy)

    C++ Primer 学习中. . . 简单记录下我的学习过程 (代码为主) 全部容器适用 unique(b,e) unique(b,e,p) unique_copy(b1,e1,b2) unique ...