效果：



代码如下：

<!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. php PDO getlastsql写法

    php PDO getlastsql写法有些时候 运行失败需要查看 sql语句 原型有没有语法错误 这个时候就用 下面的函数就是把问号替换成 值 就可以看到原型了<pre>function ...

  2. SSM整合相关试题

    1.下列关于Spring自动装配的说法中,错误的是() A 在Spring配置文件中,可以通过<bean>元素的autowire属性指定自动装配方式 B autowire属性值可以设置为n ...

  3. 微软的分布式应用框架 Dapr

    微服务架构已成为构建云原生应用程序的标准,微服务架构提供了令人信服的好处,包括可伸缩性,松散的服务耦合和独立部署,但是这种方法的成本很高,需要了解和熟练掌握分布式系统.为了使用所有开发人员能够使用任何 ...

  4. Unity中用Mesh画一个圆环(二)

    中目标-生成完整面 在之前的内容中我们已经成功生成了一个面,接下来我们要生成剩下的面就很容易了. 我们把之前生成的面当作顶面,接着我们来生成底面. 还记得前面说过\(\color{#1E90FF}{D ...

  5. CSS复合选择器是什么？复合选择器是如何工作

    复合选择器介绍 复合选择器其实很好理解,说白了就跟我们生活中的有血缘关系家庭成员一样,通过标签或者class属性或id属性,去找对应的有血缘关系的某个选择器,具体的大家往下看哦. 如果是初学者对基本的 ...

  6. MemoryStream相关知识分享

    一.简单介绍一下MemoryStream MemoryStream是内存流,为系统内存提供读写操作,由于MemoryStream是通过无符号字节数组组成的,可以说MemoryStream的性能可以算比 ...

  7. Win10专业版和企业版的区别

    微软最新的Windows 10版本诸多,包括精简版(S).家庭版(Home).专业版(Pro).企业版(Enterprise),而论功能体验,Win10专业版和企业版无疑是最完善的.那么,Win10专 ...

  8. kafka connector 使用总结以及自定义connector开发

    Kafaka connect 是一种用于在Kafka和其他系统之间可扩展的.可靠的流式传输数据的工具.它使得能够快速定义将大量数据集合移入和移出Kafka的连接器变得简单.Kafka Connect可 ...

  9. Linux -- 进程管理之僵尸进程

    UNIX 存在一种机制:在每个进程退出的同时,操作系统释放该进程所有资源,但仍然保留一定的信息(PID / Status / runtime),直到父进程执行 wait() / waitpid(),以 ...

  10. 基于 HTML5 + WebGL 的地铁 3D 可视化系统

    前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...