<!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. 关于Webpack详述系列文章 （第二篇）

    1.缩小文件搜索范围 1.1.1 include & exclude module:{ rules:[ { test:/\.js$/, use:['babel-loader?cacheDire ...

  2. StartCoroutine的使用

    StartCoroutine在unity3d的帮助中叫做协程,意思就是启动一个辅助的线程. 在C#中直接有Thread这个线程,可是在unity中有些元素是不能操作的.这个时候能够使用协程来完毕. 使 ...

  3. C#string转换为Datetime

    DateTime.ParseExact("0710090000", "MMddHHmmss", CultureInfo.CurrentCulture, Date ...

  4. Solr的关键特性

    1.基于标准的开放接口:Solr搜索服务器支持通过XML.JSON和HTTP查询和获取结果. 2.易管理:Solr可以通过HTML页面管理,Solr配置通过XML完成. 3.可伸缩性:能够有效地复制到 ...

  5. C语言库函数，头文件

    参看:https://zhidao.baidu.com/question/328173842.html 该文件包含了的C语言标准库函数的定义 stdlib.h里面定义了五种类型.一些宏和通用工具函数. ...

  6. 软件——protel 的pcb电路图制作

    近期一直在学习PCB板的绘制.

  7. 浩爷AC自己主动机高速学习方案

        今天弄完自己主动机之后.从那天比赛的阴影中爬出来了,猛地一看真不咋滴难,细致一看这尼玛还不如猛的一看. ..     必备算法:KMP,字典树(KMP我写了,字典树太简单,就是一个思想.我能够 ...

  8. android Email总结文档

    目录:src\com.android.email.activity 一. Welcome.java 根据AndroidManifest.xml可知该文件为程序入口文件: 加载该文件时,查询数据库账户列 ...

  9. oracle 10g文件目录结构详解

    一个典型的oralce目录结构如下: /u01└── oracle    ├── admin (数据库管理文件位置,以实例划分)    │   ├── mydb    │   │   ├── adum ...

  10. 【例题 6-15 UVA - 10129】Play on Words

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 拓扑大水题 [代码] #include <bits/stdc++.h> using namespace std; con ...