<!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. Python学习（三） 八大排序算法的实现（下）

    本文Python实现了插入排序.基数排序.希尔排序.冒泡排序.高速排序.直接选择排序.堆排序.归并排序的后面四种. 上篇:Python学习(三) 八大排序算法的实现(上) 1.高速排序 描写叙述 通过 ...

  2. thinkphp内置标签简单讲解

    thinkphp内置标签简单讲解 1.volist循环 name 需要遍历的数据 id 类似于foreach中 value offset 截取数据起始位置 length 截取数据的个数 mod 奇偶数 ...

  3. 35.Intellij IDEA设置忽略部分类编译错误

    转自:https://www.aliyun.com/jiaocheng/290360.html 有些时候我们的项目中有些错误,但这些错误并不影响项目的整体运行(或许是没有使用到),默认情况下idea是 ...

  4. 洛谷P1734 最大约数和

    题目描述 选取和不超过S的若干个不同的正整数,使得所有数的约数(不含它本身)之和最大. 输入输出格式 输入格式: 输入一个正整数S. 输出格式: 输出最大的约数之和. 输入输出样例 输入样例#1: 复 ...

  5. Large Division (大数求余）

    Given two integers, a and b, you should check whether a is divisible by b or not. We know that an in ...

  6. 洛谷——P1540 机器翻译

    https://www.luogu.org/problem/show?pid=1540#sub 题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的 ...

  7. Ubuntu配置图形桌面LXDE和VNC、中文语言包、中文输入法

    Ubuntu配置图形桌面LXDE和VNC.中文语言包.中文输入法 http://www.lijiejie.com/ubuntu-vps-config-lxde-vnc/ LXDE是Ubuntu图形桌面 ...

  8. Logstash Json 过滤器插件

    1. Json Filter 功能概述 这是一个JSON解析过滤器.它接受一个包含JSON的现有字段,并将其扩展为Logstash事件中的实际数据结构. 默认情况下,它将把解析过的JSON放在Logs ...

  9. "C:\Program Files\Internet Explorer\iexplore.exe" -extoff 无加载项启动IE 浏览器打开时全屏模式

    "C:\Program Files\Internet Explorer\iexplore.exe" -extoff 无加载项启动IE浏览器打开时全屏模式

  10. 多线程在python中的使用 thread

    近期想学习研究一下python中使用多线程,来提高python在爬虫项目中的效率. 如今我们在网页上查询到在python中使用的多线程的使用大多数都是使用的threading模块,可是python中另 ...