基本思路：父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. 从TP-Link到雷蛇，纷纷入局智能手机业到底想干什么？

    ​   "眼看他起朱楼,眼看他宴宾客,眼看他楼塌了",这句形容世态炎凉的话其实与智能手机市场更为相像.诺基亚的辉煌与没落.黑莓的强势与消声无迹.摩托罗拉的数次易手.小米的横空出世与 ...

  2. 餐厅随评系列之四：Umu日本料理（米其林二星）

    文章目录 在过去的几个月,工作和生活都极其忙碌,因此博客短暂停更了一阵子.慢慢积累下了很多素材,从近期开始恢复博客更新,不过很多内容估计得靠回忆了. 索性采取"倒叙"的方法,先从最 ...

  3. dagger2的Qualifier与Scope

    Qualifier即Named 当module的@Provides提供相同变量的不同属性时:用于区分把哪一个初始化 Module 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  4. flume install

    flume install flume 安装 123456 [root@10 app][root@10 app]# mv apache-flume-1.7.0-bin /mnt/app/flume[r ...

  5. 苹果为何要一定要去印度生产iPhone

    ​ 现在,关于苹果手机有几种流行的猜想和期待,今年恰逢iPhone问世十周年,新产品估计会有颠覆性创新,消费者正望穿秋水,翘首企盼,但只需待到金秋便可知晓,何况iPhone8或许也就是一小撮发烧友的选 ...

  6. PHP 导出网页表格如何对标签中的内容设置属性

    当在使用php导出excel表格的时候,有时需要将某一列专门设置成文本属性 方法: 在需要设置属性的的<td>标签中 添加  style='vnd.ms-excel.numberforma ...

  7. 46-Python深浅拷贝

    目录 一.引言 1.1 可变或不可变 二.拷贝 三.浅拷贝 深拷贝 一.引言 在python中,对象赋值实际上是对象的引用.当创建一个对象,然后把它赋给另一个变量的时候,python并没有拷贝这个对象 ...

  8. 量化投资学习笔记34——《Python机器学习应用》课程笔记08

    岭回归 解决某些训练样本线性相关,导致回归结果不稳定的情况. 它是一种用于共线性数据分析的有偏估计回归方法.是一种改良的最小二乘估计法. 在sklearn中使用sklearn.linear_model ...

  9. 用 Python 生成 HTML 表格

    在 邮件报表 之类的开发任务中,需要生成 HTML 表格. 使用 Python 生成 HTML 表格基本没啥难度, for 循环遍历一遍数据并输出标签即可. 如果需要实现合并单元格,或者按需调整表格样 ...

  10. .NET微服务从0到1：服务注册与发现（Consul）

    目录 Consul搭建 基于Docker搭建Consul 基于Windows搭建Consul ServiceA集成Consul做服务注册 Ocelot集成Consul做服务发现 更多参考 Consul ...