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. Mybatis夺标关联查询一对多实例

    <?xml version="1.0" encoding="UTF-8" ?>  <!DOCTYPE mapper PUBLIC " ...

  2. Tiny4412之串口（Uart）驱动编写

    一:tiny4412串口驱动编写 1.串口通信简介 串口通信指串口按位(bit)发送和接收字节,串口通信的概念非常简单,串口按位(bit)发送和接收字节.尽管比按字节(byte)的并行通信慢,但是串口 ...

  3. （七）SpringBoot2.0基础篇- application.properties属性文件的解析及获取

    默认访问的属性文件为application.properties文件,可在启动项目参数中指定spring.config.location的参数: java -jar myproject.jar --s ...

  4. JavaScript设计模式 Item 2 -- 接口的实现

    1.接口概述 1.什么是接口? 接口是提供了一种用以说明一个对象应该具有哪些方法的手段.尽管它可以表明这些方法的语义,但它并不规定这些方法应该如何实现. 2. 接口之利 促进代码的重用. 接口可以告诉 ...

  5. 你不知道的JavaScript--Item5 全局变量

    1.尽量少用全局对象 全局变量的问题在于,你的JavaScript应用程序和web页面上的所有代码都共享了这些全局变量,他们住在同一个全局命名空间,所以当程序的两个不同部分定义同名但不同作用的全局变量 ...

  6. JavaScript 设计模式之----单体（单例）模式

    设计模式之--单体(单例)模式 1.介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现.OK,正式开始. 在传统开发工 ...

  7. Java 读书笔记 (十七) Java 重写(Override)与重载(Overload)

    重写(Override) 重写是子类对父类的允许访问的方法的实现过程重新编写,返回值和形参都不能改变,即外壳不变,核心重写. // 如果重写不是相当于重新定义了一个方法?那为什么不直接写,还要exte ...

  8. tcp.go

    )     _, err := io.ReadFull(clientConn, buf)     if err != nil {         p.ctx.nsqd.logf("ERROR ...

  9. noip前集训

    10.18 关网了,2333 上午考试,130 rank16 一直在刚T2的割点,却直接弃了一道第一眼看上去不可做但实际并没那么难想的小模拟 但是T2没搞出来是不是也要反思一下,先是割点板子忘了,之后 ...

  10. [Usaco2015 Jan]Grass Cownoisseur 图论 tarjan spfa

    先缩点,对于缩点后的DAG,正反跑spfa,枚举每条边进行翻转即可 #include<cstdio> #include<cstring> #include<iostrea ...