<!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. ASP.NET的六大内置对象

    ASP.NET 六大内置对象(System.Web.UI.Page类): 1.Response 2.Request 3.Server 4.Application 5.Session 6.Cooki R ...

  2. 查看Oracle执行计划

    1.PL/SQL解释计划窗口 优点:方面 缺点:看到信息有限 2.explain_plan for 针对某个句子优化较方便 3.sqlplus Sqlplus里输入命令: set autotrace ...

  3. Storm UI 说明

    原文: http://blog.sina.com.cn/s/blog_5c51172c0102v26g.html

  4. ASP.NET Cookie（一）－－基本应用

    Cookie提供了一种在Web应用程序中存储用户特定信息的方法.例如,当用户访问您的站点时,您可以使用Cookie存储用户首选项或其他信息.当该用户再次访问您的网站时,应用程序便可以检索以前存储的信息 ...

  5. 利用DetachedCriteria构建HQL参数动态匹配

    此文章是基于 搭建SpringMVC+Spring+Hibernate平台 1. DetachedCriteria构建类:CriteriaBuilder.java package com.ims.pe ...

  6. js 的 protype 小总结

    这里是对该文的总结: 1.Javascript中对象的prototype属性的解释是:返回对象类型原型的引用.   2.原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并 ...

  7. Java的初始化块、静态初始化块、构造函数的执行顺序及用途探究

    Java与C++有一个不同之处在于,Java不但有构造函数,还有一个”初始化块“(Initialization Block)的概念.下面探究一下它的执行顺序与可能的用途. 执行顺序 首先定义A, B, ...

  8. CRC32

    CRC32生成多项式:X32+X26+X23+X22+X16+X12+X11+X10+X8+X7+X5+X4+X2+X+1 对应的16进制表示为:0x4C11DB7 下面贴CRC32查表法生成代码: ...

  9. [LeetCode] Unique Binary Search Trees II 独一无二的二叉搜索树之二

    Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. For e ...

  10. jQuery Ajax传值给Servlet,在Servlet里Get接受参数乱码的解决方法

    最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如 ...