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

　　主要应用了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. 「 HDOJ P3887 」 Counting Offspring

    翻译 题目描述 给你一棵树,和它的树根 $P$,并且节点从 $1\rightarrow n$ 编号,现在定义 $f(i)$ 为 $i$ 的子树中,节点编号小于 $i$ 的节点的个数. 输入格式 有多组 ...

  2. 串的基本操作（KMP算法实现）

    #include <iostream> #include <math.h> using namespace std; void StrAssign(char *T) { cha ...

  3. <Spring Data JPA>一 JPA原生

    1.pom依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  4. linux wget变成000权限

    今天使用wget下载文件时出现:-bash: /usr/bin/wget: 权限不够. 查看  /usr/bin/wget 的权限为: ---------- 1 root root 357400 3月 ...

  5. LeetCode（73）Set Matrix Zeroes

    题目 Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. cli ...

  6. OpenSSH高级功能之端口转发（Port Forwarding）

    在RedHat提供的系统管理员指南中提到OpenSSH不止是一个安全shell,它还具有X11转发(X11 Forwarding)和端口转发(Port Forwarding)的功能.X11功能一般用于 ...

  7. Java学习关于集合框架的基础接口--Collection接口

     集合框架(Collection  Framework)是Java最强大的子系统之一,位于java.util 包中.集合框架是一个复杂的接口与和类层次,提供了管理对象组的最新技术.Java集合框架标准 ...

  8. Food Delivery （区间DP）

    When we are focusing on solving problems, we usually prefer to stay in front of computers rather tha ...

  9. python基础知识--条件判断和循环

    一.输入输出 python怎么来接收用户输入呢,使用input函数,python2中使用raw_input,接收的是一个字符串,输出呢,第一个程序已经写的使用print,代码入下: 1 name=in ...

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

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