效果：



代码如下：

<!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. 原生JS实现集合结构

    1. 前言 集合是由一组无序且唯一(即不能重复)的项组成的.你可以把集合想象成一个既没有重复元素,也没有顺序概念的数组.在ES6中已经内置了集合这一数据结构--Set.接下来,我们就用原生JS来实现这 ...

  2. Java环境变量配置教程

    Windows 10  Java环境变量配置教程 目前Windows 10系统已经很成熟,大多数人开发都在Windows 10系统下进行开发,于是乎我做一下Java环境变量在Windows 10配下的 ...

  3. python Tesseract安装方法

    python Tesseract安装方法 EXE可执行文件地址:http://download.csdn.net/download/whatday/7740469:下载tesseract-ocr-se ...

  4. java中的线程安全

    在Java中,线程的安全实际上指的是内存的安全,这是由操作系统决定的. 目前主流的操作系统都是多任务的,即多个进程同时运行.为了保证安全,每个进程只能访问分配给自己的内存空间,而不能访问别的.分配给别 ...

  5. Python字典 你必须知道的用法系列

    本文Python版本为3.7.X,阅读本文之前需了解python字典的基本用法. 介绍 字典(dict)是Python中内置的一个数据结构,由多个键值对组成,键(key)和值(value)用冒号分隔, ...

  6. Linux（ubuntu）下切换root用户

    输入命令su root切换用户,会提示输入root密码,如果不记得或者是没设置过,那么可以输入sudo passwd root来设置密码,会让你输入两次密码确认.输入完即可使用su root命令切换r ...

  7. 利用Xshell配置ssh免密码登录虚拟机，进行虚拟机与物理机的传输

    先说一下 Xshell如何无密连接虚拟机: ssh登录提供两种认证方式:口令(密码)认证方式和密钥认证方式.其中口令(密码)认证方式是我们最常用的一种,这里介绍密钥认证方式登录到linux的方法.使用 ...

  8. nyoj 399-整除个数 (整除)

    399-整除个数 内存限制:64MB 时间限制:3000ms 特判: No 通过数:9 提交数:18 难度:1 题目描述: 1.2.3… …n这n(0<n<=1000000000)个数中有 ...

  9. 力扣（LeetCode）买卖股票的最佳时机 个人题解

    给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意你不能在买入股票前卖出股票. 示例 ...

  10. UNIX env查找技巧

    在一些UNIX系统上,也许可以避免硬编码Python解释器的路径,而可以在文件特定的第一行注释中这样写: #!/usr/bin/env python ... script goes here ... ...