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

　　主要应用了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 P2574 」 XOR的艺术——线段树

    # 解题思路 这题不难,但是原谅我一开始的傻逼想法,一会儿再给大家透露透露. 先说怎么做这题. 显然对于 $0$ 和 $1$ 来说,异或无非也就只有两种变化 异或了奇数次,$0$ 就会变成 $1$,$ ...

  2. 13. OPTIMIZER_TRACE

    13. OPTIMIZER_TRACE OPTIMIZER_TRACE表提供由跟踪语句的优化程序跟踪功能生成的信息. 要启用跟踪,请使用optimizer_trace系统变量. 有关详细信息,请参阅M ...

  3. c++_分巧克力（75分）

    #include <iostream> using namespace std; int n,k; ],w[]; bool fen(int bian){ ; ;i<n;i++){ c ...

  4. CSS--基础结构层叠

    权值:通配符*的权值为0,标签和伪元素的权值为1,类选择符,属性选择器或伪类的权值为10,ID选择符的权值为100,内联样式最高为1000.还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只 ...

  5. POJ 3620 Avoid The Lakes （求连接最长的线）（DFS）

    Description Farmer John's farm was flooded in the most recent storm, a fact only aggravated by the i ...

  6. fstream，sstream的学习记录

    fstream: #include<iostream> #include<fstream> using namespace std; int main(){ ofstream ...

  7. 负载均衡之Ocelot+Consul(配置文件注册服务)

    继上篇 Ocellot 做负载均衡之后,本篇将记录 Ocelot + Consul 试验如何做服务发现和服务注册. 服务发现和服务注册的背景知识,一搜满街都是. 在此,我还是写下自己对这个术语的理解吧 ...

  8. String字符串的遍历

    StringTest.java /* * 变量字符串(获取字符串中的每一个字符) */ public class StringTest { public static void main(String ...

  9. Task(TPL)简单的实现Winform(WPF)异步

    很多时候,我们要实现Winform异步操作,你可以用传统的方法,但个人感觉代码不好理解,而且使用真有点不舒服.也可以用Task来实现,Task(.net4.0新添加的对象)其实就是对线程池线程的一个封 ...

  10. POJ 2777 Count Color【线段树】

    题目大意:要求完成以下两个操作:1.将一个区间刷上一种颜色2.询问一段区间上有多少种颜色 思路:这两个操作线段树都可以很迅速的完成,具体做法是:线段树上每个节点存这个线段上的颜色数量,由于颜色数很少, ...