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之JSON序列化运用

    1.项目引用NuGet包:搜索:Newtonsoft.Json 2.序列号实例 using System; using System.Collections.Generic; using System ...

  2. NS3系列——eclipse + NS3环境搭建

    1. 安装NS3 (1)在 ubuntu12.04 中安装 ns3.20,首先要安装一下各种依赖软件: sudo apt-get install gcc g++ pythonsudo apt-get ...

  3. 使用Spring Session实现Spring Boot水平扩展

    小编说:本文使用Spring Session实现了Spring Boot水平扩展,每个Spring Boot应用与其他水平扩展的Spring Boot一样,都能处理用户请求.如果宕机,Nginx会将请 ...

  4. python 基础语法学习

    .注释 python单行注释以#开头 如:#!/usr/bin/env python3 #查找运行环境 多行注释有' ' '和" " " .python最具有特色的是使用 ...

  5. spring security4.2.2的maven配置+spring-security配置详解+java源码+数据库设计

    最近项目需要添加权限拦截,经讨论决定采用spring security4.2.2!废话少说直接上干货! 若有不正之处,请谅解和批评指正,不胜感激!!!!! spring security 4.2.2文 ...

  6. Hibernate中cascade作用

    Hibernate中cascade作用 只有“关系标记”才有cascade属性: 一个操作因级联cascade可能触发多个关联操作.前一个操作叫“主控操作”,后一个操作叫“关联操作”. cascade ...

  7. 远程服务器使用phantomjs报错：phantomjs unexpectedly exited. Status code was: 127

    原因是因为缺少phantomjs运行的依赖包 Ubuntu尝试: sudo apt-get install libfontconfig centos尝试: 用wget安装phantomjs依赖的lib ...

  8. Python logger /logging

    # !/user/bin/python # -*- coding: utf-8 -*- ''' subprocess : 需要在linux平台上测试 shell logging ''' import ...

  9. Mac下安装git

    gti下载地址 https://git-scm.com/downloads 一步一步来就完事了.安装完以后执行 git version 查看是否更新到了该版本

  10. balance.go 源码阅读

    ) //10s +随机毫秒数 后 执行下面代码     for _ = range t {         for _, v := range pBackendSvrs {             i ...