效果：



代码如下：

<!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. 使用webpack+babel构建ES6语法运行环境

    1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的 ...

  2. Python基本数据结构之文件操作

    用word操作一个文件的流程如下: 1.找到文件,双击打开 2.读或修改 3.保存&关闭 用python操作文件也差不多: f=open(filename) # 打开文件 f.write(&q ...

  3. MySQL传统点位复制在线转为GTID模式复制

    1.  GTID优缺点 MySQL传统点位复制在5.7版本前是主要的主从复制模式,而随着MySQL5.6版本引入GTID,并且MySQL5.7进行各方面的优化以后,在mySQL5.7(尤其是MySQL ...

  4. vue.config.js常用配置

    使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建 ...

  5. 「POJ 3268」Silver Cow Party

    更好的阅读体验 Portal Portal1: POJ Portal2: Luogu Description One cow from each of N farms \((1 \le N \le 1 ...

  6. Jenkins初体验-安装与部署服务

    一.概述 1.简介 在工作中接触到CD/CI,Devops相关的技术,本文记录Jenkins的基本使用.Jenkins是一款开源的持续集成工具,能够集成一套自动化部署任务. 目标 通过jenkins从 ...

  7. 你能说说Java中Comparable和Comparator的区别吗

    之前面试中被问到这个问题,当时不屑(会)回答,下来特意查了查,整理如下. Java 中为我们提供了两种比较机制:Comparable 和 Comparator,二者都是用来实现对象的比较.排序. 下面 ...

  8. Spark（一）—— 大数据处理入门

    一.Spark介绍 Apache Spark is a fast and general-purpose cluster computing system. It provides high-leve ...

  9. 【Elasticsearch 7 探索之路】（三）倒排索引

    上一篇,我们介绍了 ES 文档的基本 CURE 和批量操作.我们都知道倒排索引是搜索引擎非常重要的一种数据结构,什么是倒排索引,倒排索引的原理是什么. 1 索引过程 在讲解倒排索引前,我们先了解索引创 ...

  10. 05-商品类别数据和VUE展示

    一.商品类别数据和VUE展示 1.商品类别数据接口 将商品类别数据展示出来,视图(views.py)代码如下: class CategoryViewset(mixins.ListModelMixin, ...