Demo

asdasdasd
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Demo</title>
  5.   <style>
  6.        #app{
  7.            width: 100px;
  8.            height: 35px;
  9.            background-color: #006600;
  10.            text-align: center;
  11.            line-height: 35px;
  12.            position: relative;
  13.            transform-style: preserve-3d;
  14.            transition: all 0.3s linear;
  15.        }
  16.        #app:hover{
  17.            transform: rotateX(90deg);
  18.            transition: all 0.3s linear;
  19.            -webkit-transform-origin: 50% 0;
  20.        }
  21.        #app:before{
  22.            position: absolute;
  23.            top: 100%;
  24.            left: 0;
  25.            content: attr(data-hover);
  26.            width: 100px;
  27.            height: 35px;
  28.            transform: rotateX(-90deg);
  29.            transition: all 0.3s linear;
  30.            transform-origin: 50% 0;
  31.            text-align: center;
  32.            line-height: 35px;
  33.             background-color: red;
  34.        }
  35.     </style>
  36.  
  37. <div class="box">
  38.     <div id="app" data-hover="asdasdasd">
  39.         asdasdasd
  40.     </div>
  41. </div>
  42. </body>
  43. </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. 第二届强网杯部分writeup

    MD5部分 第一题 一看就有些眼熟 emmmm 查看一下源代码: 重点是这里 这里面要求POST上去的参数 param1 != param2 && md5('param1') == m ...

  2. python3 爬取qq音乐作者所有单曲 并且下载歌曲

    1 import requests import re import json import os # 便于存放作者的姓名 zuozhe = [] headers = {'User-Agent': ' ...

  3. 一分钟告诉你究竟DevOps是什么鬼？

    历史回顾 为了能够更好的理解什么是DevOps,我们很有必要对当时还只有程序员(此前还没有派生出开发者,前台工程师,后台工程师之类)这个称号存在的历史进行一下回顾. 如编程之道中所言: 老一辈的程序员 ...

  4. 在webpack里使用jquery.mCustomScrollbar插件

    malihu-custom-scrollbar-plugin是一个依赖jquery的自定义网页滚动条样式插件 网站:http://manos.malihu.gr/jquery-custom-conte ...

  5. Linux共享库、静态库、动态库详解

    1. 介绍 使用GNU的工具我们如何在Linux下创建自己的程序函数库?一个“程序函数库”简单的说就是一个文件包含了一些编译好的代码和数据,这些编译好的代码和数据可以在事后供其他的程序使用.程序函数库 ...

  6. 修改WordPress后台默认登陆地址提高网站安全性

    作者:荒原之梦 原文链接:http://zhaokaifeng.com/?p=536 安装完WordPress后,默认的登陆地址就是: http://XXX.XXX/wordpress/wp-admi ...

  7. 在单用户模式下修改CentOS的root密码

    我们在使用CentOS的过程中可能会发生忘记root用户密码的情况,本文就从应用的角度简单介绍一下如何在单用户模式下修改root用户的密码. 开启CentOS,进入系统启动菜单 将光标停留在系统开机时 ...

  8. aliyun TableStore相关操作汇总

    总结:这个东西本身可能技术还不成熟,使用的人少,有问题很验证解决 遇到的问题:(1)没有一个GUI工具,使用门槛高(2)查询的GetRange不方便,把查询出来的数据使用System.out.prin ...

  9. Using variables inside Postman and Collection Runner

    Variables are among the most powerful features in Postman. Using variables in your Postman requests, ...

  10. 玩转CSS3(一)----CSS3实现页面布局

    请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 摘要:     CSS3相对CSS2增加了一些新的布局方式:多栏布局和盒子布局.在这篇文章中,将对CSS2的布局进行简单的回忆,并总结CSS3的 ...