<!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. [SDOI2008]石子合并 题解

    题面 GarsiaWachs算法专门解决石子合并问题: 设一个序列是A[0..n-1],每次寻找最小的一个满足A[k-1]<=A[k+1]的k,那么我们就把A[k]与A[k-1]合并,并向前寻找 ...

  2. centos7 使用nginx + tornado + supervisor搭建服务

    如何在Linux下部署一个简单的基于Nginx+Tornado+Supervisor的Python web服务. Tornado:官方介绍,是使用Python编写出来的一个极轻量级.高可伸缩性和非阻塞 ...

  3. tp5定时任务

    第一步: a.App/模块/ 下创建command文件夹 b.我这边是创建在crontab模块里面,在command文件夹下创建一个Task.php文件(具体名字自己根据需求定) c.复制下面的代码到 ...

  4. h5中的分组元素figure、figcaption、hgroup元素介绍

    分组元素用于对页面中的内容进行分组. figure元素和figcaption元素 figure元素用于定义独立的流内容(图像.图表.照片.代码等),一般指一个独立的单元.figure元素的内容应该与主 ...

  5. 定义vue目录别名

  6. FTP-实例(Md5验证)

    import socket, os, hashlib server = socket.socket() server.bind(("localhost", 9999)) serve ...

  7. 深入理解计算机系统 第十章 系统级I/O 第二遍

    了解 Unix I/O 的好处 了解 Unix I/O 将帮助我们理解其他的系统概念 I/O 是系统操作不可或缺的一部分,因此,我们经常遇到 I/O 和其他系统概念之间的循环依赖.例如,I/O 在进程 ...

  8. luogu题解 P3811 【【模板】乘法逆元】

    upd--7.6 原线性求逆元代码有另一种更优写法 题目链接: https://www.luogu.org/problemnew/show/P3811 概念: 一想到JXOI 2018考场上忘记逆元怎 ...

  9. pymssql文档（转）

    pymssql methods set_max_connections(number) -- Sets maximum number of simultaneous database connecti ...

  10. 海量数据处理 从哈希存储到Bloom Filter(1) (转载)

    先解释一下什么是哈希函数.哈希函数简单来说就是一种映射,它可取值的范围(定义域)通常很大,但值域相对较小.哈希函数所作的工作就是将一个很大定义域内的值映射到一个相对较小的值域内. 传统的哈希存储 假设 ...