<!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. 长按TextField或TextView显示中文的粘贴复制

    首先要确保手机当前系统为中文,只需要在 plist 文件中添加 Localized resources can be mixed = YES 就行了

  2. Android之RecyclerView的原生Bug-Inconsistency detected. Invalid view holder adapter positionViewHolder{a1bbfa3 position=2 id=-1, oldPos=-1, pLpos:-1 no parent}

    今天在运行自己编写的App时,突然发现App在运行时闪退,然后就查看了Android Studio的Log,发现了这个错误,上网查了一下,才知道是RecyclerView的原生Bug,在数据更新时会出 ...

  3. 【极品代码】一般人我不告诉他，手机端h5播放时不自动全屏代码

    已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...

  4. C#语言学习记录

    1.&& || ! 与或非-逻辑运算符,&&的优先级大于||.

  5. 【转】MySql中的函数

    原文:http://www.cnblogs.com/kissdodog/p/4168721.html MySQL数据库提供了很多函数包括: 数学函数: 字符串函数: 日期和时间函数: 条件判断函数: ...

  6. 文本处理三剑客之sed命令

    第十八章.文本处理三剑客之sed命令 目录 sed介绍 sed命令常用选项 sed常用编辑命令 sed使用示例 sed高级语法 18.1.sed简介 sed全名stream editor,流编辑器,s ...

  7. Linux安装详情图解

    本文讲解Linux的安装 因为是纯属学习使用,所以安装在了虚拟机里   需要软件: VirtualBox-5.1.10 ubuntu-16.04.1-desktop-amd64 说明: 虚拟机可以选择 ...

  8. (转)Dubbo与Zookeeper、SpringMVC整合和使用

    原文地址: https://my.oschina.net/zhengweishan/blog/693163 Dubbo与Zookeeper.SpringMVC整合和使用 osc码云托管地址:http: ...

  9. python爬虫学习(9) —— 一些工具和语法

    1. Beautiful Soup 在它的官网有这样一段话: You didn't write that awful page. You're just trying to get some data ...

  10. C#终于支持可选参数了!

    今天偶然看了一下C#4.0的新特性, 第一个新特性就令我兴奋不已, 曾经一度令我使用C#很不习惯的"死参数"问题终于搞定了.实在太爽了! 过去用C++, VB.NET的时候都很爽, ...