<!DOCTYPE html>

<html >

<head>

    <title>test</title>

    <meta http-equiv="content-type" content="text/html" charset="utf-8">

    <meta name="author" content="xuyunfei">

    <meta name="description" content="随便做做测试">

    <meta name="keywords" content="test,html">

    <title>随便做做</title>

    <style>

        *{ margin: 0; padding: 0; box-sizing: border-box; }

        .container, .one, .two{ width: 100px; height: 100px; }

        .container{ position: relative; transition: 1s; transform-style: preserve-3d; }

        .container:hover { transform: rotateY(180deg); }

        .one{ position: absolute; top: 0; background: red; transform: rotateY(180deg);backface-visibility: hidden;}/*两个元素的位置一致,把背面隐藏起来,背面的元素翻转过来*/

        .two{ position: absolute; top: 0; background: yellow;backface-visibility: hidden;}

    </style>

</head>

<body>

    <div class="par">

        <div class="container">

            <div class="one hide">隐藏在背后的元素</div>

            <div class="two show">初始显示在前面的元素</div>

        </div>

    </div>

    <script type="text/javascript">

    </script>

</body>

</html>

简洁的div翻转案例的更多相关文章

  1. css+div布局案例

    给最外层的div命名一个class 有针对性的进行css布局. <div class="joinus-info"> <div class="form-t ...

  2. Div布局案例

    通常看到这个页面,会想到它是有几块组成的. 第一块,分销佣金. 第二块,包括代言.商品.二维码 其中代言又是左右结构. 于是乎基本的div结构就出来了. <div class="row ...

  3. 简洁的drag效果，自由拖拽div的实现及注意点

    偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...

  4. css笔记17：盒子模型加强版的案例

    1.先看看经典案例效果图,导出思路: 分析:思路 基本结构 <div> <ul> <li><img src=""/> </li ...

  5. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  6. PHP不使用任何内置函数实现字符串翻转

    实现字符串翻转PHP本身自带一个函数就可以解决,strrev函数.这里不适用任何内置函数实现字符串翻转 案例一(纯字母): $str = 'abcdefghig k'; //假设测试的字符串/g与k之 ...

  7. Vue 自定义一个插件的用法、小案例及在项目中的应用

    1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1 ...

  8. div覆盖div DIV相互重叠如何解决

    div覆盖div,出现div与div盒子之间产生重叠覆盖现象,而内容没有出现覆盖重叠现象原因与解决方法.DIVCSS5通过CSS图文案例介绍产生原因与解决方法.DIV与DIV覆盖原因与解决方法. 可能 ...

  9. JUC : 并发编程工具类的使用

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.JUC是什么 1.JUC定义 JUC,即java.util.concurrent 在并发编程中使用的 ...

随机推荐

  1. java实现敏感词过滤（DFA算法）

    小Alan在最近的开发中遇到了敏感词过滤,便去网上查阅了很多敏感词过滤的资料,在这里也和大家分享一下自己的理解. 敏感词过滤应该是不用给大家过多的解释吧?讲白了就是你在项目中输入某些字(比如输入xxo ...

  2. DX12龙书第6章习题

    1. { { , DXGI_FORMAT_R32G32B32_FLOAT, , , D3D12_INPUT_CLASSIFICATION_PER_VERTEX_DATA, }, { , DXGI_FO ...

  3. ThinkPHP实现定时任务

    项目服务端框架我选用的是ThinkPHP,由于策划案中有需求要定时刷新指定数据,所以在windows平台我使用微软的计划任务调用bat脚本来执行下面的命令来完成 php index.php /Home ...

  4. Long类型的数据转换时间格式方法

    function getDate(date) { //得到日期对象 var d=new Date(date); //得到年月日 var year =d.getFullYear(); ); var da ...

  5. 0035 Java学习笔记-注解

    什么是注解 注解可以看作类的第6大要素(成员变量.构造器.方法.代码块.内部类) 注解有点像修饰符,可以修饰一些程序要素:类.接口.变量.方法.局部变量等等 注解要和对应的配套工具(APT:Annot ...

  6. spool命令

    最近工作中,需对数据进行比对.在此之前,则需将数据导出.想到以前用过的spool命令,实验一番,分享如下: 需建SQL执行脚本,内容如下: set feedback off   --关掉行数显示set ...

  7. ASP.NET Cookie（二）－－控制Cookie的范围

    默认情况下,一个站点的全部Cookie都一起存储在客户端上,而且所有Cookie都会随着对该站点发送的任何请求一起发送到服务器.也就是说,一个站点中的每个页面都能获得该站点的所有Cookie.但是,可 ...

  8. db2学习笔记--数据类型对表的影响

    创建表的时为列选择合适的数据类型,可以提高数据库性能. 1.选择合适的数据类型,避免出现数据类型转换.例如日期,有人使用字符串来存放日期.时间戳,最后我们还要在程序中使用to_date做数据类型转换, ...

  9. python ldap

    # -*- coding: UTF-8 -*- import ldap, ConfigParser, os from ldap import modlist LDAP_HOST = "myd ...

  10. 萌新笔记——封装hiredis——C++与redis对接（一）（string的SET与GET操作）

    在菜鸟教程自学了redis,总想着像Mysql一样,在C/C++中进行对接.于是查询了一些资料,最后找到了hiredis.然而直接用它的话,难免有点不方便.于是,对其进行封装. hiredis直接去g ...