基本思路：父div使用相对定位包裹着两个子元素，子元素使用绝对定位，定位在同一个位置，初始时一个div翻转到后面隐藏，另一个在前面显示，当鼠标悬停在父元素上时，前面的子元素旋转180度，到背面隐藏；背面的元素旋转360度，转到前面显示，这样就实现了旋转卡片的效果。撒花
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卡片翻转</title>
    <style>
        .outside{
            width:220px;
            height: 276px;
            cursor:pointer;
            margin:50px auto;
            position:relative;//卡片的父元素使用相对定位
            perspective:500;//相当于是Z轴，具体解释可以查看https://www.cnblogs.com/le220/p/7923210.html
            -webkit-perspective:1000;
        }
        .outside img{
            max-width:220px;
        }
        .front_img,
        .back_img{
            width:100%;
            height:100%;
            position:absolute;//子元素相对于父元素使用绝对定位，两个子元素都定位到同一个位置，实现重叠的效果
            top:0;
            left:0;
            perspective: 1000;//相当于是Z轴，具体解释可以查看https://www.cnblogs.com/le220/p/7923210.html
            -webkit-perspective:1000;
            backface-visibility: hidden;//背面图片不可见，没有这个属性可能导致翻转时看不到背面的图片
            transition: all 1.5s;
            -webkit-transition: all 1.5s;
            -moz-transition: all 1.5s;
            -ms-transition: all 1.5s;
            -o-transition: all 1.5s;
        }
        .back_img{
            transform: rotateY(180deg);//初始时，背面div旋转到背面
        -webkit-transform: rotateY(180deg);
        }
        .outside:hover .front_img{
            transform:rotateY(180deg);//鼠标悬浮在元素上时，前面一层的图片正旋转180度，实现前面的图片旋转到背面，达到隐藏的效果
            -webkit-transform: rotateY(180deg);
        }
        .outside:hover .back_img{
            transform:rotateY(360deg);//鼠标悬浮在元素上时，前面一层的图片正旋转360度，实现前面的图片旋转到前面，达到显示的效果
            -webkit-transform: rotateY(360deg);
        }
    </style>
</head>
<body>
    <div>
        <div class="outside">
            <div class="front_img">
                <img src="https://gaopin-preview.bj.bcebos.com/133206318551.jpg@!420"  alt="front_picture"/>
            </div>
            <div class="back_img">
                <img src="https://cdn.duitang.com/uploads/item/201402/03/20140203220956_dnZGV.thumb.600_0.jpeg" alt="back_ground" />
            </div>
        </div>
    </div>
</body>
</html>

css3实现旋转卡片的更多相关文章

  1. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  2. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  3. CSS3实现旋转的太极图（二）：只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

  4. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  5. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  6. 【Demo】CSS3元素旋转、缩放、移动或倾斜

    CSS3元素旋转.缩放.移动或倾斜 代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  8. css3立体旋转菜单

    css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...

  9. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

随机推荐

  1. 正则表达式入门-python代码

    题记 本文介绍了Python对于正则表达式的支持,包括正则表达式基础以及Python正则表达式标准库的完整介绍及使用示例. 正则表达式在很多的应用中都有使用到,特别是在网络爬虫中格式化html后取出自 ...

  2. numpy的基础运算1

    import numpy as np #int16和int32内存少,int64内存大但精度高 a = np.array([1,23,4],dtype=np.int32) b = np.zeros(( ...

  3. Jackie's blog

    介绍使用winmm.h进行音频流的获取   首先需要包含以下引用对象 #include <Windows.h>#include "mmsystem.h"#pragma ...

  4. session和el表达式

    2015/1/21 ## 回顾昨天案例 ## # 模拟购物车: >> 基本步骤: |-- 显示所有的书籍: |-- 制作书记列表/模仿数据库: |-- 参见昨天示例: |-- 制作查看详情 ...

  5. 初识 jquery.simulate.js 模拟键盘事件

    用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...

  6. Vue2.0组件的继承与扩展

    如果有需要源代码,请猛戳源代码 希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢 前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/exte ...

  7. JAVA Integer值的范围

    原文出处:http://hi.baidu.com/eduask%C9%BD%C8%AA/blog/item/227bf4d81c71ebf538012f53.html package com.test ...

  8. Azure CLI 简单入门

    Azure CLI 是什么 Azure 命令行接口 (CLI) 是用于管理 Azure 资源的 Microsoft 跨平台命令行体验. Azure CLI 易于学习,是构建适用于 Azure 资源的自 ...

  9. Ctrl+F5和F5区别

    F5刷新的内容是从本地缓存中读取刷新,刷新本地缓存 Ctrl+F5直接读取服务器上的最新的内容—— Ctrl+F5会把Internet 临时文件夹的文件删除再重新从服务器下载,也就是彻底刷新页面了.. ...

  10. 双列集合Map相关面试题

    一.了解Map集合吗?Map集合都有哪些实现 HashMap HashTable LinkedHashMap TreeMap ConcurrentHashMap 二.HashMap和HashTable ...