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

　　主要应用了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. ubuntu修改网卡名称ensX为eth0

    1.sudo nano /etc/default/grub 找到GRUB_CMDLINE_LINUX="" 改为GRUB_CMDLINE_LINUX="net.ifnam ...

  2. 杭电 2141 Can you find it? （二分法）

    Description Give you three sequences of numbers A, B, C, then we give you a number X. Now you need t ...

  3. 单链表 C语言 学习记录

    概念 链接方式存储 链接方式存储的线性表简称为链表(Linked List). 链表的具体存储表示为: 用一组任意的存储单元来存放线性表的结点(这组存储单元既可以是连续的,也可以是不连续的). 链表中 ...

  4. 什么是slug URL 中的 slug

    How would you reference this object with a URL, with a meaningful name? You could use Article.id so ...

  5. [POJ1984]Navigation Nightmare

    [POJ1984]Navigation Nightmare 试题描述 Farmer John's pastoral neighborhood has N farms (2 <= N <= ...

  6. HDU 4405 飞行棋上的数学期望

    突然发现每次出现有关数学期望的题目都不会做,就只能找些虽然水但自己还是做不出的算数学期望的水题练练手了 题目大意: 从起点0点开始到达点n,通过每次掷色子前进,可扔出1,2,3,4,5,6这6种情况, ...

  7. Flask处理前端POST过来的JSON数据

    POST JSON数据的JS代码: $.ajax({ url:'http://127.0.0.1:5000/calc', type : 'post', dataType:'json', headers ...

  8. [Baltic2007]序列问题Sequence

    Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 1002  Solved: 535[Submit][Status][Discuss] Descriptio ...

  9. 【BZOJ2982】combination（Lucas定理）

    题意:求C(n,m) n,m<=200000000 思路:c(n,m)=c(n mod mo,m mod mo)*c(n div mo,m div mo) mod mo (n>=mo或m& ...

  10. UOJ 58 （树上带修改的莫队）

    UOJ 58 糖果公园 Problem : 给一棵n个点的树,每个点上有一种颜色,对于一条路径上的点,若 i 颜色第 j 次出现对该路径权值的贡献为 w[i] * c[j], 每次询问一条路径的权值, ...