html5——3D案例（音乐盒子、百度钱包）
1、音乐盒子：触碰盒子，盖子会打开
2、百度钱包：触碰钱包，钱包，会180度旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} body {
height: 2000px;
} /*音乐盒*/
.music {
width: 200px;
height: 200px;
position: relative;
margin: 10px 0 0 200px;
} .music::before, .music::after {
content: "音乐盒";
width: 100%;
height: 100%;
font: 400 20px/200px "Microsoft YaHei";
color: yellow;
text-align: center;
border-radius: 50% 50% 50% 50%;
position: absolute;
top: 0;
left: 0;
background-color: #cccccc;
} .music::after {
content: "打开音乐盒子";
background-color: blue;
transform-origin: left;
transition: all 1s;
} .music:hover.music::after {
transform: rotateY(-180deg);
} /*百度钱包*/
.money {
width: 200px;
height: 200px;
position: relative;
margin: 10px 0 0 200px;
} .money::before, .money::after {
content: "基本没用";
width: 100%;
height: 100%;
font: 400 20px/200px "Microsoft YaHei";
color: yellow;
text-align: center;
border-radius: 50% 50% 50% 50%;
position: absolute;
top: 0;
left: 0;
background-color: #cccccc;
transition: all 1s;
/*盒子背面不可见*/
backface-visibility: hidden;
} .money::before {
transform: rotateY(-180deg);
} .money::after {
content: "百度钱包";
background-color: blue;
/*transform: translateZ(400px);*/
} .money:hover.money::before {
transform: rotateY(-360deg);
} .money:hover.money::after {
transform: rotateY(-180deg);
}
</style>
</head>
<body>
<!--音乐盒-->
<div class="music"></div>
<!--百度钱包-->
<div class="money"></div>
</body>
</html>
html5——3D案例（音乐盒子、百度钱包）的更多相关文章
- html5——3D案例（立方体）
立方体:父盒子规定了3d呈现属性,立方体做旋转运动 移动顺序:1.每个盒子都先移动100px,然后再做相应的旋转 2.只有这样立方体的几何中心点与父盒子的几何中心点是一样的 <!DOCTYPE ...
- html5——3D案例（立体导航）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5——3D案例（立体汉字，旋转导航）
1.立体汉字:旋转点left,attr(data-cont)可获取自定义属性值,skewY(倾斜转换)参考地址 2.旋转导航:先移动后旋转,li标签需要延迟执行旋转 注意::hover事件触发自己的: ...
- HTML5 3D Google搜索 小盒子 大世界
HTML5真是能让人想象万千,居然动起了Google搜索的主意,它利用HTML5技术将Google搜索放到了一个小盒子里,弄起了3D搜索.随着鼠标移动,HTML5 3D搜索盒子也就转动,非常立体.点击 ...
- 3D案例，导航，导航升级版
/*****************************百度钱包旋转变内容******************************/ <!DOCTYPE html> <htm ...
- CSS3动画之百度钱包
百度钱包的步骤:1.建一个盒子,里面放两个盒子,代表正反面,两个盒子叠一起,正面层次高2.当鼠标Hover时,正面盒子从0deg->-180deg,反面盒子从-180deg->0deg3. ...
- 8个经典HTML5 3D动画赏析
HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...
- HTML5 3D动画效果
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
- 9个超绚丽的HTML5 3D图片动画特效
在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...
随机推荐
- [K/3Cloud]如何解决K3Cloud 2.0审批流提交时报“队列不存在，或您没有足够的权限执行该操……
按照图上的操作即可解决不可提交的问题,但如果应用服务器是部署在域环境下,应该不会出错,这是微软support上说的
- [bzoj2055]80人环游世界[网络流，上下界网络流]
手动画了整张图,,算是搞懂了吧,, #include <bits/stdc++.h> #define INF 0x3f3f3f3f using namespace std; templat ...
- Hihocoder 1329（splay）
Problem 平衡树 Splay 题目大意 维护一个数列,支持三种操作. 操作1:添加一个数x. 操作2:询问不超过x的最大的数. 操作三:删除大小在区间[a,b]内的数. 解题分析 和上一题相比, ...
- 1.4－动态路由协议OSPF②
LAB2.通过反掩码控制有哪些接口,在运行OSPF ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ step1:启动OSPF,并宣告网络: R1(config ...
- IOS开发之block应用
非常长时间都是在学习各位大神的力作,并汲取了不少养料,在此一并谢过各位大神了. 当然了.好东西是要跟大家一起分享的,近期发现了几个很不错的个人网站,都是介绍IOS开发的.当中有唐巧.破船之长.池建强. ...
- Android推断屏幕锁屏的方法总结
转载请注明:http://blog.csdn.net/heroxuetao/article/details/24639203 因为做一个项目,须要推断屏幕是否锁屏,发现网上方法非常多.可是比較杂.如今 ...
- 【Linux命令】--（1）文件文件夹操作命令15条
文件文件夹操作命令++++++++++++++++++++++++++++++++++++++++ 列出进入显示文件夹 ls cd pwd 创建移动删除文件 mkdir rm rmd ...
- 转 java synchronized详解
转自 http://www.cnblogs.com/GnagWang/archive/2011/02/27/1966606.html Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能 ...
- HDUPhysical Examination（贪心）
HDUPhysical Examination(贪心) 题目链接 题目大意:给N个队列,每一个队列在0时刻体检的时候完毕时间是ai.假设超过t(s),那么就是ai + t∗bi.问如何组合才干用最短的 ...
- LeetCode 941. Valid Mountain Array (有效的山脉数组)
题目标签:Array 题目给了一组int array A,让我们判断它是否是 一个山脉数组. 山脉数组一定要有一个最高值,然后要同时有 山坡和下坡. 想法是,从左边开始依次比较两个数字,int[0] ...