基本思路：父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. Pandas提取单元格的值

    如提取第1行,第2列的值: df.iloc[[0],[1]] 则会返回一个df,即有字段名和行号. 如果用values属性取值: df.iloc[[0],[1]].values 返回的值会是列表,而且 ...

  2. 修改 Cucumber HTML 报告

    后台服务是 JSON-RPC 风格的,所以 Scenario 都是这样的 Scenario: login successful When I set request body from "f ...

  3. 网络地址转换NAT与端口地址转换PAT

    网络地址转换NAT与端口地址转换PAT 一.网络地址转换 NAT (Network Address Translation) 1.1.网络地址转换简介 需要在专用网(内网)连接到因特网的路由器上安装 ...

  4. 微信小程序从开发至发布的流程

    今天在公司将这几天开发的小程序,进行版本上线,在这里记录下. 首先,将微信开发工具里的代码上传到微信小程序平台里,如下所示 之后,在微信小程序平台进行审核提交,填写相应的信息即可,注意,审核提交分为紧 ...

  5. MVC01

    1.Controller 1) 添加: 在Controller目录右键进行添加,出现很多模式供选择,选择空的Controller,命名后新建.新建后Views 目录将同步生成相应名称的视图文件目录 均 ...

  6. Angular 1 深度解析：脏数据检查与 angular 性能优化

    TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...

  7. 前端每日实战：70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 此视频是可 ...

  8. JZOJ 5307. 【NOIP2017提高A组模拟8.18】偷窃 (Standard IO)

    5307. [NOIP2017提高A组模拟8.18]偷窃 (Standard IO) Time Limits: 1000 ms Memory Limits: 262144 KB Description ...

  9. GPS授时器简介

    GPS授时器简介 GPS是全球定位系统的简称.GPS定位卫星在全球范围内进行定位.导航的系统.GPS所具有的全天候.高精度和自动测量的特点,已经融入到国民经济建设.国防建设和社会发展的各个领域.而在授 ...

  10. WEB渗透 - 万能密码

    asp万能密码 'or'='or' aspx万能密码 1: "or "a"="a 2: ')or('a'='a 3:or 1=1-- 4:'or 1=1-- 5 ...