<!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. Scala访问修饰符（四）

    Scala 访问修饰符基本和Java的一样,分别有:private,protected,public. 如果没有指定访问修饰符符,默认情况下,Scala对象的访问级别都是 public. Scala ...

  2. 常用ASCII CHR碼對照

    因為開發需求,把對照表留下來一下. Chr(0) Null Chr(29) 分组符 Chr(38) & Chr(48) 0 Chr(8) 退格 Chr(30) 記錄分離符號 Chr(39) ‘ ...

  3. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

  4. Say goodbye to my photos&videos

    刚刚得知一个悲惨的消息:虽然2012已经过去了,但是世界末日并未过去.嗯,我不是来严肃的,我是来搞笑的.毕竟,我已经如此伤心了.中午结束考试,下午看了一半的电影然后躺室友的床上睡了一觉,醒来看到阿姨发 ...

  5. Keepalived使用梳理

    keepalived介绍keepalived观察其名可知,保持存活,在网络里面就是保持在线了,也就是所谓的高可用或热备,它集群管理中保证集群高可用的一个服务软件,其功能类似于heartbeat,用来防 ...

  6. BZOJ 4614 【Wf2016】 Oil

    题目链接:Oil 感觉同时几线作战有点吃不消啊-- 这道题有一个显然的结论,那就是最优的直线一定过某条线段的端点. 仔细想想很有道理.如果最终的直线没有过线段的端点的话,那么这条直线就一定可以平移,直 ...

  7. jenkins 入门教程(下)

    接上回继续学习jenkins,这次主要来看一些疑难杂症: 一.yum install安装方式 除了直接java -jar jenkins.war方式,还可以用yum安装,这种方式下提供了更多的可配置选 ...

  8. [开源].NET数据库访问框架Chloe.ORM

    扯淡 13年毕业之际,进入第一家公司实习,接触了 EntityFramework,当时就觉得这东西太牛了,访问数据库都可以做得这么轻松.优雅!毕竟那时还年轻,没见过世面.工作之前为了拿个实习机会混个工 ...

  9. [LeetCode] Find K Pairs with Smallest Sums 找和最小的K对数字

    You are given two integer arrays nums1 and nums2 sorted in ascending order and an integer k. Define ...

  10. [LeetCode] Balanced Binary Tree 平衡二叉树

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...