<!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. [转帖]盖茨辉煌后将归隐 DOS之父仍为生计打拼(图)

    盖茨辉煌后将归隐 DOS之父仍为生计打拼(图) http://www.sina.com.cn 2007年12月10日 09:43  新浪科技 https://tech.sina.com.cn/it/2 ...

  2. vm下centos7 mini版 NAT模式下配置静态IP

    1.查看虚拟机的默认网关和子网掩码 a.vm菜单栏点击编辑->虚拟网络编辑器 b.选择VMnet8,点击NAT设置,查看子网掩码.网关IP                2. 修改服务器的网络配 ...

  3. Xshell~工作中访问Linux服务器

    1.下载Xshell 下载地址:https://xshell.en.softonic.com/ 2.安装(无特殊修改,自行安装即可) 3.使用 登录(1.新建->输入主机IP,点击确定-> ...

  4. 牛客 109 C 操作数 (组合数学)

    给定长度为n的数组a,定义一次操作为:1. 算出长度为n的数组s,使得si= (a[1] + a[2] + ... + a[i]) mod 1,000,000,007:2. 执行a = s:现在问k次 ...

  5. ubutnu18.04LTS 配置网卡新特性

    在Ubuntu16的时候配置网卡信息都是在 /etc/network/interfaces 下的,但是到了18,配置文件位置改为了/etc/netplan/*.yaml,配置配置内容如下: netwo ...

  6. .Net面试题四

    1.C#编译成的dll存放在哪个目录?C#程序文件的后缀名是什么?.csproj后缀名是什么文件? 2.请写出C#中常用文件操作类.数据库操作类.网络请求类.每项至少写出三个 3.请定义一个只读属性: ...

  7. QT获取屏幕分表率（PC、安卓）

    QRect screenRect = QGuiApplication::primaryScreen()->geometry(); double devicePixelRatio = QGuiAp ...

  8. 今天朋友带领去谷歌ok2eat 餐厅吃免费午餐

    中午去队友公司免费吃饭.朋友带我们去她的楼下吃,就算是googler真的也不是所有cafe都知道,感谢朋友带领.

  9. 提升Scrapy框架爬取数据效率的五种方式

    1.增加并发线程开启数量 settings配置文件中,修改CONCURRENT_REQUESTS = 100,默认为32,可适当增加: 2.降低日志级别 运行scrapy时会产生大量日志占用CPU,为 ...

  10. Vue的三个点es6知识，扩展运算符

    Vue中的三个点在不同情境下的意思 操作数组 //里面放自己定义的方法 methods: { /** * 把数组中的元素孤立起来 */ iClick() { let iArray = ['1', '2 ...