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

　　主要应用了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. ArrayList集合（JDK1.8）

    简述 List是继承于Collection接口,除了Collection通用的方法以外,扩展了部分只属于List的方法. 常用子类  ?ArrayList介绍 1.数据结构 其底层的数据结构是数组,数 ...

  2. (15) openssl签署和自签署证书的多种实现方式

    1.采用自定义配置文件的实现方法 1.1 自建CA 自建CA的机制:1.生成私钥:2.创建证书请求:3.使用私钥对证书请求签名. 由于测试环境,所以自建的CA只能是根CA. 所使用的配置文件如下: [ ...

  3. day23 01 类的命名空间

    day23  01 类的命名空间 一.初识面向对象复习 定义类: class 函数:方法 动态属性 变量:类属性 静态属性 过程: (1)_init_方法:初始化:def _init_(self,参数 ...

  4. Python开发环境之pyenv环境搭建

    首先到Github上下载Pyenv相应的一键安装脚本, 安装完毕,设置环境变量,设置环境变量,可以添加到个人家目录的.bashrc或.bash_profile及系统的全局的/etc/profile, ...

  5. 最近的一些JAVA基础知识

    1,关于判断两个值是否相等 equal 和==是有区别到 2,判断一个数组集合 List是否为空 这个不能用"==null或者equal"要用isEmpty() , 对于不等于加一 ...

  6. HUD-1559 最大子矩阵,dp模拟

    最大子矩阵                                                                                               ...

  7. [luoguP2801] 教主的魔法（二分 + 分块）

    传送门 以为对于这类问题线段树都能解决,分块比线段树菜,结果培训完才知道线段树是一种特殊的分块方法,有的分块的题线段树不能做,看来分块还是有必要学的. 对于这个题,先分块,然后另开一个数组对于每个块内 ...

  8. POJ 1486 Sorting Slides【二分图匹配】

    题目大意:有n张幻灯片和n个数字,幻灯片放置有重叠,每个数字隶属于一个幻灯片,现在问你能够确定多少数字一定属于某个幻灯片 思路:上次刷过二分图的必须点后这题思路就显然了 做一次二分匹配后将当前匹配的边 ...

  9. 【判连通】HDU 6113 度度熊的01世界

    http://acm.hdu.edu.cn/showproblem.php?pid=6113 [题意] 度度熊是一个喜欢计算机的孩子,在计算机的世界中,所有事物实际上都只由0和1组成. 现在给你一个n ...

  10. hdu 3879 最大权闭合图（裸题）

    /* 裸的最大权闭合图 解:参见胡波涛的<最小割模型在信息学竞赛中的应用 #include<stdio.h> #include<string.h> #include< ...