css实现3D切换功能
Demo
<!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切换功能的更多相关文章
- 使用jQuery+css实现选项卡切换功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- JS 实现 Tab标签切换功能
Tab标签切换 效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
- 基于jQuery带标题的图片3D切换焦点图
今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...
- vue2 3d 切换器
空闲时写了一个3d切换器,灵感来自于转行前画3d工程图,效果如图: 功能:按住鼠标中间,变为3d模式,点击6个页面中的某一个页面,页面旋转放大,恢复到2d图形,3d图消失.再次点击鼠标中间,恢复为3d ...
- tabs自动切换功能的实现
<html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...
- 基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- ViewPager取消左右滑动切换功能
ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...
- Lining.js - 为CSS提供 ::nth-Line 选择器功能
在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...
随机推荐
- 洛谷 P3177 树上染色 解题报告
P3177 [HAOI2015]树上染色 题目描述 有一棵点数为\(N\)的树,树边有边权.给你一个在\(0\) ~ \(N\)之内的正整数\(K\),你要在这棵树中选择\(K\)个点,将其染成黑色, ...
- 微信小程序-获取经纬度
微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ...
- Android 进阶 教你打造 Android 中的 IOC 框架 【ViewInject】 （下）
上一篇博客我们已经带大家简单的吹了一下IoC,实现了Activity中View的布局以及控件的注入,如果你不了解,请参考:Android 进阶 教你打造 Android 中的 IOC 框架 [View ...
- centos7服务器无GUI情况下安装使用Xvfb、selenium、chrome和selenium-server
最近需要用到selenium浏览器抓取,在windows下对照chrome浏览器开发的代码,在linux服务器上换成phantomjs驱动后,却不能运行了,通过截图发现phantomjs渲染效果和ch ...
- 测试网页时需要添加等待的情形 (Selenium)
测试网页时需要添加等待的情形: 1. 网页跳转 2. DOM结构发生改变.
- Hibernate用注解生成表
User.java实体来 package com.tao.pojo; import javax.persistence.Column; //用注解的方式生成表 import javax.persist ...
- bzoj3435 [Wc2014]紫荆花之恋
如果这棵树不变的话,就是一个裸的点分树套平衡树,式子也很好推$di+dj<=ri+rj$,$ri-di>=dj-rj$ 平衡树维护$dj-rj$,然后查$ri-di$的$rank$即可. ...
- bzoj3631[JLOI2014 松鼠的新家 倍增lca+差分
裸的树上差分+倍增lca 每次从起点到终点左闭右开,这就有一个小技巧,要找到右端点向左端点走的第一步,然后差分就好了 #include<cstdio> #include<cstrin ...
- 【强连通分量】Bzoj1051 HAOI2006 受欢迎的牛
Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么牛A也认 ...
- BZOJ_1975_[Sdoi2010]魔法猪学院_A*
BZOJ_1975_[Sdoi2010]魔法猪学院_A* Description iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的学习之后,iPi ...