Demo

asdasdasd
 
<!DOCTYPE html>

<html lang="en">

<head>

    <title>Demo</title>

  <style>

       #app{

           width: 100px;

           height: 35px;

           background-color: #006600;

           text-align: center;

           line-height: 35px;

           position: relative;

           transform-style: preserve-3d;

           transition: all 0.3s linear;

       }

       #app:hover{

           transform: rotateX(90deg);

           transition: all 0.3s linear;

           -webkit-transform-origin: 50% 0;

       }

       #app:before{

           position: absolute;

           top: 100%;

           left: 0;

           content: attr(data-hover);

           width: 100px;

           height: 35px;

           transform: rotateX(-90deg);

           transition: all 0.3s linear;

           transform-origin: 50% 0;

           text-align: center;

           line-height: 35px;

            background-color: red;

       }

    </style>

<div class="box">

    <div id="app" data-hover="asdasdasd">

        asdasdasd

    </div>

</div>

</body>

</html>

css实现3D切换功能的更多相关文章

  1. 使用jQuery+css实现选项卡切换功能

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  3. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  4. 基于jQuery带标题的图片3D切换焦点图

    今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...

  5. vue2 3d 切换器

    空闲时写了一个3d切换器,灵感来自于转行前画3d工程图,效果如图: 功能:按住鼠标中间,变为3d模式,点击6个页面中的某一个页面,页面旋转放大,恢复到2d图形,3d图消失.再次点击鼠标中间,恢复为3d ...

  6. tabs自动切换功能的实现

    <html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...

  7. 基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  8. ViewPager取消左右滑动切换功能

    ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...

  9. Lining.js - 为CSS提供 ::nth-Line 选择器功能

    在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...

随机推荐

  1. .net如何使用系统中没有安装的字体？

    不想安装到客户端的 Fonts 目录下面,但是我又想在程序中使用它. 这段代码放在哪里? 字体文件需要放到要安装的机器上吗?并不需要 System.Drawing.Text.PrivateFontCo ...

  2. 许式伟：我与Go语言的这十年[转]

    2017-12-18 许式伟 Go中国 2007 年 9 月 20 日,关于设计一门全新语言的讨论正式开始,这门全新的语言,就是后来的 Go.时至今日,Go 语言已经发布到 1.9 版本,走过了整整十 ...

  3. spring MVC(十)---spring MVC整合mybatis

    spring mvc可以通过整合hibernate来实现与数据库的数据交互,也可以通过mybatis来实现,这篇文章是总结一下怎么在springmvc中整合mybatis. 首先mybatis需要用到 ...

  4. 23.app后端如何架设文件系统

    现在app展现内容的形式多种多样的,有文字,图片,声音,视频等等,其中文件占了一个很大的比重.随着app不断运营,文件会越来越多,占用的磁盘空间也不断增大,架设一套高效的文件系统,对于整个app架构有 ...

  5. Redis in Python：HyperLogLog(pfadd、pfcount、pfmerge)

    redis HyperLogLog 可以接受多个元素作为输入,并给出输入元素的基数估算值. 基数:集合中不同元素的数量.比如 [foo', 'bar', 'foobar', 'bar', 'test' ...

  6. [SQL Server]用 C# 在 LinqPad 建立 Linked Server 跨服务器数据库操作

    在涉及老项目数据迁移的时候,数据库结构已经完全发生变化,而且需要对老数据进行特殊字段的处理,而且数据量较大,使用Navicat导出单表之后,一个表数据大概在100多万的样子,直接导出SQL执行根本行不 ...

  7. Java通过JDBC 进行MySQL数据库操作

    转自: http://blog.csdn.net/tobetheender/article/details/52772157 Java通过JDBC 进行MySQL数据库操作 原创 2016年10月10 ...

  8. Dubbo中SPI扩展机制解析

    dubbo的SPI机制类似与Java的SPI,Java的SPI会一次性的实例化所有扩展点的实现,有点显得浪费资源. dubbo的扩展机制可以方便的获取某一个想要的扩展实现,每个实现都有自己的name, ...

  9. election.go

    package)) ].GetResponseRange().Kvs[] ) ].Value),]         }         wch := client.Watch(cctx, string ...

  10. bzoj5342 CTSC2018 Day1T3 青蕈领主

    首先显然的是,题中所给出的n个区间要么互相包含,要么相离,否则一定不合法. 然后我们可以对于直接包含的关系建出一棵树,于是现在的问题就是给n个节点分配权值,使其去掉最后一个点后不存在非平凡(长度大于1 ...