应一个朋友要求替他把原本静态页面做成翻牌的特效。

　　主要应用了CSS3的transform，transiton。首先写好标签，一个ul下两个li元素，通过position的absolue设置两个li元素重合，设置z-index大小使不同呈现。然后css中设置hover事件并更改相应CSS属性。代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    * {

        margin: 0;

        padding: 0;

    }

    ul,

    li {

        margin: 0;

        padding: 0;

        list-style: none;

    }

    .nav {

        transition: transform 0.6s ease-out;

        transition: transform .5s ease-in-out;

        -webkit-transition: transform .5s ease-in-out;

        -moz-transition: transform .5s ease-in-out;

        -ms-transition: transform .5s ease-in-out;

        -o-transition: transform .5s ease-in-out;

        -webkit-transform-style: preserve-3d;

        /*使其子类变换后得以保留 3d转换后的位置*/

        -moz-transform-style: preserve-3d;

        -ms-transform-style: preserve-3d;

        -o-transform-style: preserve-3d;

        transform-style: preserve-3d;

        display: block;

        position: relative;

    }

    .nav:hover .list2 {

        transform: rotateY(0deg);

        -webkit-transform: rotateY(0deg);

        z-index: 2;

    }

    .nav:hover .list1 {

        transform: rotateY(180deg);

        -webkit-transform: rotateY(180deg);

        z-index: 1;

    }

    .nav,

    .list1,

    .list2 {

        width: 200px;

        height: 200px;

    }

    .list1,

    .list2{

         backface-visibility: hidden;

        transition: 0.6s ease-out;

        -webkit-transition: .6s ease-out;

        -webkit-transform-style: preserve-3d;

        -moz-transform-style: preserve-3d;

        -ms-transform-style: preserve-3d;

        -o-transform-style: preserve-3d;

        transform-style: preserve-3d;

        position: absolute;

        top: 0;

        left: 0;

    }

    .list1 {

        z-index: 2;

        transform: rotateY(0deg);

        transform: rotateY(0deg);

        -webkit-transform: rotateY(0deg);

        -moz-transform: rotateY(0deg);

        -ms-transform: rotateY(0deg);

        -o-transform: rotateY(0deg);

    }

    .list2 {

        z-index: 1;

        transform: rotateY(-180deg);

        transform: rotateY(-180deg);

        -webkit-transform: rotateY(-180deg);

        -moz-transform: rotateY(-180deg);

        -ms-transform: rotateY(-180deg);

        -o-transform: rotateY(-180deg);

    }

    </style>

</head>

<body>

    <ul class="nav">

        <li class="list1"><img src="1.png">前面</li>

        <li class="list2"><img src="2.png">后面</li>

    </ul>

</body>

</html>

　

CSS制作翻牌特效的更多相关文章

  1. 纯css实现翻牌特效

    大家有没有看到过网上很炫的翻牌效果,牌正面对着我们,然后点击一下,牌就被翻过来了,效果很酷炫,是不是很想知道是怎么实现的么,代码很简单,跟着小编往下走. 先给大家介绍一下翻牌的原理: 1.父容器设置设 ...

  2. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  3. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  4. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

  5. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  6. CSS制作照片墙

    资料来源:慕课网(点击这里) 课程结束后有两个效果: 效果一:CSS制作照片墙(点击这里) 效果二:旋转出现文字效果(点击这里) 实现代码: <!DOCTYPE html> <htm ...

  7. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  8. 利用CSS制作图形效果

    前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型 ...

  9. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

随机推荐

  1. luogu P1238 走迷宫--DFS模板好（水）题

    题目描述 有一个m*n格的迷宫(表示有m行.n列),其中有可走的也有不可走的,如果用1表示可以走,0表示不可以走,文件读入这m*n个数据和起始点.结束点(起始点和结束点都是用两个数据来描述的,分别表示 ...

  2. Linux制作本地yum

    首先在vm上安装centos 1.首先查看挂载光盘的位置:#df -h [root@lang ~]# df -hFilesystem                   Size  Used Avai ...

  3. C/C++连接MySQL数据库执行查询

    1. 简介: 使用C/C++连接MySQL数据库执行增删改查操作,基本就是围绕以下两个文件展开: mysql.h(此头文件一般在MySQL的include文件夹内,如 D:\MySQL\mysql-5 ...

  4. java 图片合成文字或者awt包下的对话框引入自定义字体库

    成就卡图片字体问题:1.下载 xxx.ttf 文件2.mkdir /usr/local/jdk1.6.0_11/jre/lib/fonts/fallback.     在jre/lib/fonts 下 ...

  5. 开发语言之---Python

    Python,如果你想进军AI,或是不想被自动化运维淘汰,Python是一门必须课. 在未来的大学课堂上,也许也会将Python加入必修中,就像Java一样. Python之“Hello World” ...

  6. 事务场景中，抛出异常被catch后，如果需要回滚，一定要手动回滚事务

    Spring使用声明式事务处理,默认情况下,如果被注解的数据库操作方法中发生了unchecked异常,所有的数据库操作将rollback:如果发生的异常是checked异常,默认情况下数据库操作还是会 ...

  7. 大数据学习——yarn集群启动

    启动yarn命令: start-yarn.sh 验证是否启动成功 jps查看进程 http://192.168.74.100:8088页面 关闭 stop-yarn.sh

  8. CodeForces 606C--Sorting Railway Cars，思路题~~~

    C - Sorting Railway Cars   Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d &am ...

  9. CodeForces 444C 节点更新求变化值的和

    http://vjudge.net/problem/viewProblem.action?id=51622 题目大意: 给定一列n个数字,最初赋予值1到n 两个操作:1.将区间[l,r]内的数改为x, ...

  10. [luoguP1666] 前缀单词（DP）

    传送门 先把所有字符串按照字典序排序一下 会发现有字符串x和y(x再y前面,即字典序小),如果x不是y的前缀,那么在x前面不是x前缀的字符串也不是y的前缀 这样就可以DP了 f[i][j]表示前i个字 ...