效果：



代码如下：

<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>3D Flipping Effect</title>

  <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>

  <style type="text/css">

   *{

    margin: 0;

    padding: 0;

   }

   body{

    height: 100vh;

    background-color: #bdc3c7;

    color: white;

   }

   .middle{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

   }

   .wrap{

    width: 300px;

    height: 500px;

    position: relative;

   }

   .wrap h2{

    font-size: 40px;

    margin-bottom: 20px;

   }

   .front , .back{

    width: 100%;

    height: 100%;

    position: absolute;

    background: url(../img/bg.jpg);

    background-size: cover;

    backface-visibility: hidden;

    box-shadow: 0 0 10px #2c3e50;

    transition: .8s;

   }

   .front{

    transform: perspective(800px) rotateY(0deg);

   }

   .back{

    transform: perspective(800px) rotateY(180deg);

   }

   .back .contact-info{

    margin-top: 10px;

   }

   .back .contact-info a{

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 40px;

    height: 40px;

    text-decoration: none;

    color: #d1d8e0;

    border-radius: 50%;

   }

   .back .contact-info a:hover{

    color: white;

    background-color: #4a69bd;

   }

   .wrap:hover .front{

    transform: perspective(800px) rotateY(-180deg);

   }

   .wrap:hover .back{

    transform: perspective(800px) rotateY(0deg);

   }

  </style>

 </head>

 <body class="middle">

  <div class="wrap">

   <div class="front middle">

    <h2>愿意</h2>

    <h3>用一支黑色的铅笔</h3>

    <h3>画一出沉默舞台剧</h3>

   </div>

   <div class="back middle">

    <h2>愿意</h2>

    <h3>在角落唱沙哑的歌</h3>

    <h3>再大声也都是给你</h3>

    <div class="contact-info">

     <a href="#"><i class="iconfont icon-weibo"></i></a>

     <a href="#"><i class="iconfont icon-weixin"></i></a>

     <a href="#"><i class="iconfont icon-tuite"></i></a>

     <a href="#"><i class="iconfont icon-youtube"></i></a>

    </div>

   </div>

  </div>

 </body>

</html>

CSS 3D图片翻转 ——3D Flipping Effect的更多相关文章

  1. HTML和CSS实现图片翻转效果

    实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果 页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...

  2. CSS 3 学习——transform 3D转换渲染

    以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...

  3. 纯CSS3实现超立体的3D图片侧翻倾斜效果

    看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图.那么接下来我们分析一下源码吧,显示html代码,非常简单: ...

  4. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

  5. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  6. HTML+CSS之光标悬停图片翻转效果

    设计思路:         首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...

  7. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  8. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

随机推荐

  1. 使用Typescript重构axios(十八)——请求取消功能：总体思路

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  2. Project Euler 57: Square root convergents

    五十七.平方根收敛(Square root convergents) 二的平方根可以表示为以下这个无穷连分数: \[ \sqrt 2 =1+ \frac 1 {2+ \frac 1 {2 +\frac ...

  3. ARP协议字段解读

    Hardware type : 硬件类型,识别链路层协议 Protocol type : 协议类型,标识网络层协议 Hardware size : 硬件地址大小,标识MAC地址长度,这里是6个字节(4 ...

  4. jsp页面不乱码，外部引用的js弹出对话框乱码

    今天在做一个课程设计的时候,写到一个界面注册,在用js判断数据的正确性时,碰到了一个js弹出框的乱码问题.在网上找寻了很久,也找了很多博客看,但是发现怎么样都不能解决我的问题,下面给出几个比较经典的解 ...

  5. MySQL添加主键和外键

    查看表的字段信息:desc 表名; 查看表的所有信息:show create table 表名; 添加主键约束:alter table 表名 add constraint 主键 (形如:PK_表名) ...

  6. 全栈项目|小书架|服务器开发-JWT 详解

    JWT 官方简介:Introduction to JSON Web Tokens 文章基本是官网内容的翻译,英文不错的同学可点击上面的链接直接看英文文档. 什么是 JWT JWT全称是JSON Web ...

  7. python快速获取网页标准表格内容

    from html_table_parser import HTMLTableParser def tableParse(value): p = HTMLTableParser() p.feed(va ...

  8. Java类/接口的API

    本章节收集的类/接口API有: Object类,枚举,包装类,接口Comparable,类Arrays,异常, Object类 public String toString(): [把一个对象的信息用 ...

  9. nyoj 12-喷水装置（二）(贪心)

    12-喷水装置(二) 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:10 submit:30 题目描述: 有一块草坪,横向长w,纵向长为h,在它的橫 ...

  10. 一文教你快速读懂MQTT网关

    MQTT是一种发布(publish)/订阅(subscribe)协议,MQTT协议采用发布/订阅模式,所有的物联网终端都通过TCP连接到云端,云端通过主题的方式管理各个设备关注的通讯内容,负责将设备与 ...