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. git merge 撤销与git 回滚

    git merge提交后恢复 http://blog.psjay.com/posts/git-revert-merge-commit/ git回滚 https://www.jianshu.com/p/ ...

  2. 并发库应用之五 & ReadWriteLock场景应用

    Lock比传统线程模型中的synchronized方式更加面向对象,与生活中的锁类似,锁本身也应该是一个对象.两个线程执行的代码片段要实现同步互斥的效果,它们必须用同一个Lock对象. 读写锁:分为读 ...

  3. PAT1101:Quick Sort

    1101. Quick Sort (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CAO, Peng There is a ...

  4. 令状态寄存器访问指令（MRS,MSR）

    ARM中有两条指令用于在状态寄存器和通用寄存器之间传送数据. 针对32位的ARM处理器,状态寄存器就是一个32位长的寄存器.每个位的含义如下图: 分成了4部分: 1,条件标志位 N(Negative) ...

  5. no system images installed for this target这个问题如何解决？

    今天想查看个项目的布局,结果发现这个Hierarchy这个工具没有提供对实体机的支持,所以就想加一个模拟机,结果还曝出了这么么一个错误,导致不能设置模拟机: 在网上的查找下,发现原来是缺失了 圈中的是 ...

  6. 关于Linux虚拟化技术KVM的科普 科普一(先用起来！)

    是骡子是马是拉出来溜溜,通过<KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机>跑一遍,就会对KVM.QEMU-KVM有个大概的认识了. qemu-kvm已经不单独存在,qemu加上 ...

  7. PHP 的 uniqid 函数产生的 id 真的是唯一的么？

    PHP 的 uniqid 函数产生的 id 真的是唯一的么? 最近使用到了 uniqid,就产生了疑问?uniqid 生成的 id 由什么组成?真的是唯一的么?什么情况下会产生冲突? 从文档中看到 u ...

  8. 关于Kafka日志留存策略的讨论

    关于Kafka日志留存(log retention)策略的介绍,网上已有很多文章.不过目前其策略已然发生了一些变化,故本文针对较新版本的Kafka做一次统一的讨论.如果没有显式说明,本文一律以Kafk ...

  9. 用Python写WebService接口并且调用

    一.用ladon框架封装Python为Webservice接口 另用soaplib实现请看:    http://www.jianshu.com/p/ad3c27d2a946 功能实现的同时,希望将接 ...

  10. int i=0;i=i++

    package algorithms.com.guan.javajicu; public class Inc { public static void main(String[] args) { In ...