效果：



代码如下：

<!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. .Net Core Vue Qucik Start

    .Net Core Vue Qucik Start This is a ASP.NET Core 3.0 project seamlessly integrationed with Vue.js te ...

  2. Eclipse对Java项目打Jar包

    在本Java项目中,如下图一所示,Java项目含有外部依赖Jar包 -- fastjson-1.2.29.jar  包. 在经历了多次的失败后,最后我终于使用 Eclipse 对 "Java ...

  3. csp-s2019游记

    11.15D0: 复习 复习 机房里弥漫着颓废的气息,不过也是最后一个下午了 11.16D1: 五点钟爬起来,一边发抖一边去楼下买早饭 虽然平时基本不吃早饭,但考前不行 搭着同学的车去了考点,在车上重 ...

  4. JavaScript: 遍历Array的同时删除指定项

    一个简单的需求是,在遍历一个数组时,移除指定的项. 下列代码是不能正常工作的: var elements = [1, 5, 5, 3, 5, 2, 4]; for(var i = 0; i < ...

  5. [WPF] Caliburn Micro学习一 Installation

    在之前的文章(http://blog.csdn.net/alvachien/article/details/5670838)里面,已经提到过MVC和MVVM在Design Pattern上的比较. 首 ...

  6. Hadoop压缩的图文教程

    近期由于Hadoop集群机器硬盘资源紧张,有需求让把 Hadoop 集群上的历史数据进行下压缩,开始从网上查找的都是关于各种压缩机制的对比,很少有关于怎么压缩的教程(我没找到..),再此特记录下本次压 ...

  7. suseoj 1206 众数问题 （相邻数比较）

    1206: 众数问题 时间限制: 1 Sec  内存限制: 128 MB提交: 45  解决: 8[提交][状态][讨论版][命题人:liyuansong] 题目描述 给定含有n个元素的多重集合S,每 ...

  8. 【编程题与分析题】Javascript 之继承的多种实现方式和优缺点总结

    [!NOTE] 能熟练掌握每种继承方式的手写实现,并知道该继承实现方式的优缺点. 原型链继承 function Parent() { this.name = 'zhangsan'; this.chil ...

  9. 系统信息命令（uname、dmesg、df、hostname、free）

    uname 显示计算机及操作系统相关的信息,uname -a显示全部信息,uname -r内核的发行号,各种信息可以有单独的选项分别指出 [lixn@Fedora24 ~]$ uname -a Lin ...

  10. web前端面试经常遇得到的题型

    1.position的值, relative和absolute分别是相对于谁进行定位的? § absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位. ...