<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css翻面</title>

    <style type="text/css">

        .box {

            width: 300px;

            height: 272px;

            margin: 50px auto 0;

            transform-style: preserve-3d;

            position: relative;

        }

        .box .front {

            width: 300px;

            height: 272px;

            text-align: center;

            line-height: 272px;

            position: absolute;

            background-color: red;

            left: 0;

            top: 0;

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

            backface-visibility: hidden;

            transition: all 500ms ease;

        }

        .box .back_info {

            width: 300px;

            height: 272px;

            text-align: center;

            line-height: 272px;

            background-color: gold;

            position: absolute;

            left: 0;

            top: 0;

            transform: rotateY(180deg);

            backface-visibility: hidden;

            transition: all 500ms ease;

        }

        .box:hover .front {

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

        }

        .box:hover .back_info {

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

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="front">我是正面文字说明</div>

        <div class="back_info">我是背面文字说明</div>

    </div>

</body>

</html>

参考https://www.toutiao.com/i6737657633232126472/

css实现翻面效果的更多相关文章

  1. css实现翻页效果

    如图,鼠标移动到图上,实现右上角翻页的效果,本例主要border边框的设置. 一.基本概念 <html> <head> <style> #demo{ width:0 ...

  2. 纯css实现翻书效果

    前言 最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...

  3. webapp应用--模拟电子书翻页效果

    前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

  4. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  5. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

  6. Turn.js 实现翻书效果的学习与总结

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

  7. JS实现图片翻书效果示例代码

    js 图片翻书效果.  picture.html  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  ...

  8. JS实现图片翻书效果

    picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http- ...

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

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

随机推荐

  1. 自然语言处理工具python调用hanlp的方法步骤

    Python调用hanlp的方法此前有分享过,本篇文章分享自“逍遥自在017”的博客,个别处有修改,阅读时请注意! 1.首先安装jpype 首先各种坑,jdk和python 版本位数必须一致,我用的是 ...

  2. matplotlib库之直方图

    例题:假设你获取了250部电影的时长(列表a中),希望统计出这些电影时长的分布状态(比如时长为100分钟到120分钟电影的数量,出现的频率)等信息,你应该如何呈现这些数据? 一些概念及问题: 把数据分 ...

  3. X-UA-Compatibles

    今天在看京东网页代码的时候,发现了X-UA-Compatibles 这个元信息属性,不是很清楚,百度了一下,做下记录 X-UA-Compatible 属性是 IE 浏览器在 IE8 版本开始提供的一个 ...

  4. PBOC第八部分和第十一部分关于TYPEA总结（二）——传输协议（ISO14443－4）

    二.传输协议(ISO14443-4)(8,P50 11,P30) 1.选择应答请求(RATS) 使用RATS命令和PICC协商通讯的最大帧长度(FSD和FSC).帧等待时间(FWT)和启动帧保护时间( ...

  5. Scala学习三——数组相关操作

    一.若长度固定则使用Array,若长度可能有变化则使用ArrayBuffer 固定长度数组: 如val nums=new Array[Int](10) //10个整型数组,所有元素初始化为0; val ...

  6. Java 代码运行顺序

    1.静态代码块,只执行一次,从上到下,先父类后子类 2.父类构造代码块,从上到下,然后父类构造方法,执行次数与实例化次数相关 3.子类构造代码块,从上到下,然后子类构造方法,执行次数与实例化次数相关

  7. Bootstrap3基础教程 03 导航栏

    Bootstrap导航栏 创建一个默认的导航栏的步骤如下: 1.向 <nav> 标签添加 class .navbar..navbar-default. 2.向上面的元素添加 role=&q ...

  8. 清除vs2005、vs2008起始页最近打开项目

    有时候vs2005起始最近打开项目过多很想清除掉,但打遍了也没找到清除选项在哪里,今天找到了方法,发上来和大家共享. 方法一手工操作方法:1)删除最近打开的文件运行regedit,打开HKEY_CUR ...

  9. 微信小程序上传图片及本地测试

    前端(.wxml) <view id="view1"> <view id="btns"> <image id="ima1 ...

  10. [转载]python with语句的用法

    https://www.cnblogs.com/DswCnblog/p/6126588.html 看这篇文章的时候看到了python的类名()用法,很好奇,上网查了下,原来这就相当于对类进行实例化了. ...