基本思路：父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. 免密码 ssh 到其它机器

    背景:在配置 hadoop 的时候这样设置会比较方便.目标:A 机器上输入 ssh root@B 可以直接访问,不需要输入密码 步骤: 首先在 A 机器上生成密钥对,一路回车 1 ssh-keygen ...

  2. Ubuntu18.04安装OpenStack

    Ubuntu18.04 安装Queens版本OpenStack 安装环境 系统 系统使用的是Ubuntu18,最少4核8G内存,20G硬盘空间. 工具 devstack DevStack是一系列可扩展 ...

  3. 用新架构适配MI3中遇到的各种坑

    用新架构适配MI3中遇到的各种坑 首先不得不说hendy架构的强大之处, mi3也直接开机但是遇到各种坑,不能怪架构不够强大,只有说miui定制化太高.下面详细说一下mi3适配中的各种坑.有些坑会附带 ...

  4. Microsoft Translator发布粤语文本翻译

    今天,Microsoft Translator发布了粤语的文本翻译,新的语言增加将继续丰富微软翻译产品的生态系统*,让更多组织和个人能够快速且高效地实现翻译应用.在中国,大有约5500万人使用粤语(语 ...

  5. JasperReport框架使用教程(附带常见空白页问题说明)

    概述与安装使用 1. PDF报表概述 概述 ​ 在企业级应用开发中,报表生成.报表打印下载是其重要的一个环节.在之前的课程中我们已经学习了报表中比较重要的一种:Excel报表.其实除了Excel报表之 ...

  6. 《N诺机试指南》（八）日期、字符串、排序问题

    1.日期问题: 输入: 例题: 代码: #include <stdio.h> #include <bits/stdc++.h> struct node{ int year, m ...

  7. webpack压缩图片之项目资源优化

    webpack打包时,会根据webpack.config.js 中url-loader中设置的limit大小来对图片进行处理,小于limit的图片转化成base64格式,其余的不做操作.对于比较大的图 ...

  8. MySQL的万字总结（缓存，索引，Explain，事务，redo日志等）

    hello,小伙伴们,好久不见,MySQL系列停更了差不多两个月了,也有小伙伴问我为啥不更了呢?其实我去看了MySQL的全集,准备憋个大招,更新篇长文(我不会告诉你是因为我懒的). 好了,话不多说,直 ...

  9. 内网渗透之信息收集-Linux系统篇

    linux 系统信息 grep MenTotal /proc/meminfo #查看系统内存总量 cat /etc/issue #查看系统名称 cat /etc/lsb-release #查看系统名称 ...

  10. django 验证码图片生成视图函数

    def verify_code(request): import random # 定义验证码图片背景颜色 宽和高 bgcolor = (random.randrange(20,180),random ...