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. webpack4：连奏中的进化

    webpack4在2月底的时候发布,这次webpack4有了一个名字"Legato",也就是"连奏"的意思,寓意webpack在不断进化,而且是无缝(no-ga ...

  2. Spring+Mybatis多数据源的一种实现方式，支持事务

    最近一个项目用到了多个数据库,所以需要实现动态切换数据源来查询数据,http://www.cnblogs.com/lzrabbit/p/3750803.html这篇文章让我受益匪浅,提供了一种自动切换 ...

  3. Linux获取网络接口信息

    linux获取网络接口信息需要用到的函数为ioctl(),结构体struct ifreq,struct ifconf 1.ioctl()函数原型及作用 #include <sys/ioctl.h ...

  4. SSM-MyBatis-17：Mybatis中一级缓存（主要是一级缓存存在性的证明，增删改对一级缓存会造成什么影响）

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 缓存------------------------------------------> 很熟悉的一个 ...

  5. js定时器让动画隔秒运动

    现有一个需求,宝箱隔几秒动一次,抓住用户眼球,自己写了个 doem.

  6. java中Collection容器

    1.容器(Collection)也称为集合, 在java中就是指对象的集合. 容器里存放的都只能是对象. 实际上是存放对象的指针(头部地址): 这里对于八种基本数据类型,在集合中实际存的是对应的包装类 ...

  7. 浅谈cookie，sessionStorage和localStorage

    cookie:cookie在浏览器和服务器间来回传递 cookie数据不能超过4k 同时每次http请求都会携带cookie,所以cookie只适合保存很小的数据,比如会话标识 cookie只在设置的 ...

  8. 用spark导入数据到hbase

    集群环境:一主三从,Spark为Spark On YARN模式 Spark导入hbase数据方式有多种 1.少量数据:直接调用hbase API的单条或者批量方法就可以 2.导入的数据量比较大,那就需 ...

  9. MySQL 开发实践 8 问，你能 hold 住几个？

    最近研发的项目对DB依赖比较重,梳理了这段时间使用MySQL遇到的8个比较具有代表性的问题,答案也比较偏自己的开发实践,没有DBA专业和深入,有出入的请使劲拍砖!- MySQL读写性能是多少,有哪些性 ...

  10. Travel 并查集

    题意:给一个图,若干询问,每次询问只经过边权<=w的边,x能到达的点数 并查集啊,对询问和边排序,直接合并,维护size,查询 #include<cstdio> #include&l ...