<!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. mysql 实行模糊查询 一个输入值匹配多个字段和多个输入值匹配一个字段

    mysql 实行模糊查询  一个输入值匹配多个字段 MySQL单表多字段模糊查询可以通过下面这个SQL查询实现 为啥一定要150字以上  真的麻烦  还不让贴代码了 SELECT * FROM `ma ...

  2. MockServer jar包安装

    github地址: https://github.com/jamesdbloom/mockserver 1. org.apache.maven.plugin-tools:maven-plugin-an ...

  3. C#如何调用非托管的C++Dll

    现在在Windows下的应用程序开发,VS.Net占据了绝大多数的份额.因此很多以前搞VC++开发的人都转向用更强大的VS.Net.在这种情况下,有很多开发人员就面临了如何在C#中使用C++开发好的类 ...

  4. 【习题 7-8 UVA-12107】Digit Puzzle

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 迭代加深搜索. 枚举最大层数.(也即改变的数字个数 然后枚举第一个改哪个数字,第二个改哪个数字.. 一定要注意字典序问题. 每次优先 ...

  5. Spring MVC框架实例

    Spring  MVC 背景介绍 Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块.使用 Spring 可插入的 MVC 架构,能够选择是使用内置的 Spring Web 框架还是 ...

  6. mysql中load data Infile运用

    速度比insert要快20倍.共享一下java程序操作. package com.mysql.csv; import java.sql.Connection; import java.sql.Driv ...

  7. 【C语言】编写函数实现库函数atoi，把字符串转换成整形

    //编写函数实现库函数atoi.把字符串转换成整形 #include <stdio.h> #include <string.h> int my_atoi(const char ...

  8. 4.auto详解

    #include <iostream> using namespace std; template <calss T1,class T2> auto add(T1 t1, T2 ...

  9. 使用solr的DIHandler 构建mysql大表全量索引，内存溢出问题的解决方法

    solr官方给出的解决方式是: DataImportHandler is designed to stream row one-by-one. It passes a fetch size value ...

  10. Mongodb总结6-数据库启动、停止、备份等命令

    #启动Mongodb默认启动,需要在/data/db,Windows下对应的目录是Mongod.exe所在磁盘分区的根目录,例如Mongodb存放在D:/Mongodb,那么对应的路径就是D:/dat ...