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的动画效果.本 ...
随机推荐
- 武大OJ 613. Count in Sama’s triangle
Description Today, the math teacher taught Alice Hui Yang’s triangle. However, the teacher came up w ...
- oracle 12c show con_name
今天安装了一个oracle 12c的数据库做测试,在运行一个很简单的命令时出错了: SQL> show con_name concat "." (hex 2e) SP2: u ...
- Mybatis在Spring环境下的启动顺序
主要看三个类: mybatis-spring-1.2.2.jar包 -> org.mybatis.spring.SqlSessionFactoryBean mybatis-3.2.6.jar包 ...
- Android 学习历程摘要（三）
1.proguard混淆:对与Activity等不应进行混淆.否则系统将找不到生命周期函数:JSON字符串要考虑混淆之后是否会影响字段名:native方法也不混淆,否则调用不到 2.ListView的 ...
- 1.4－动态路由协议OSPF⑥
OSPF Network Type/网络类型 (Run Mode/运行模式) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 物理 ...
- 将一个对象相同的属性(不区分大小写)赋值给一个新对象 DataTable的一个简单的扩展
将一个对象相同的属性(不区分大小写)赋值给一个新对象 1 public static T Mapper<S, T>(S source) 2 { 3 T t = Activator.Cr ...
- Unity3D 怎样在安卓手机上播放视频
曾经仅仅会在电脑上通过Unity3D播放视频,研究了下发现通过Unity3D在手机上播放视频也很easy.现介绍例如以下. void OnGUI() { if (GUI.But ...
- mysql 常用查询语句记录
SELECT DISTINCT CONCAT('User: ''',USER,'''@''',HOST,''';') AS QUERY FROM mysql.user; GRANT USAGE ON ...
- Tiny4412 开发板 编译环境搭建【转】
本文转载自:http://blog.csdn.net/beijiwei/article/details/51055369 版权声明:本文为博主原创文章,未经博主允许不得转载. /*********** ...
- .NET平台下Redis使用(三)【ServiceStack.Redis学习】
MVC4项目下对redis进行增删该查 Models文件下实体类: public class Book { public string BookName {get;set;} public strin ...