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的动画效果.本 ...
随机推荐
- JavaSE部分之（1）Java基础
JavaSE部分之(1)Java基础 1.为什么重写equals还要重写hashcode 为了提高程序的效率才实现了hashcode方法,先进行hashcode的比较,如果不同,那就没必要再进行equ ...
- 演练：使用VS2010 C# 创作简单的多线程组件
BackgroundWorker 组件取代了 System.Threading 命名空间并添加了功能:但是,可以选择保留 System.Threading 命名空间以实现向后兼容并供将来使用.有关更多 ...
- [转]《MEF程序设计指南》博文汇总
在MEF之前,人们已经提出了许多依赖注入框架来解决应用的扩展性问题,比如OSGI 实现以Spring 等等.在 Microsoft 的平台上,.NET Framework 自身内部包含组件模型和 Sy ...
- 编程规范(一 之kmalloc,fflush,fclose,char_init)
1. kmalloc函数接口: 在我们使用的时候常常使用该接口,可是我们非常少注意过这个接口的一些比較重要的 内核接口.比如: /*申请一个HASH表的大小*/ #define HASH_MALLOC ...
- 解析cocos2d-lua项目中的Hello World
创建完cocos2d-x的lua项目后.打开项目的Resources目录,找到hello.lua.cocos2d-x的lua项目的測试样例主要就是由这个脚本文件运行的. require "A ...
- Oracle Temp 表空间切换
一.TEMP表空间作用 暂时表空间主要用途是在数据库进行排序运算.管理索引.訪问视图等操作时提供暂时的运算空间,当运算完毕之后系统会自己主动清理.当 oracle 里须要用到 sort 的时候. PG ...
- HDU 5446 CRT+Lucas+快速乘
Unknown Treasure Problem Description On the way to the next secret treasure hiding place, the mathem ...
- WIZnet的网络产品怎样选型
文章来源:成都浩然 我们在选用WIZnet的网络产品的时候.面对诸多的器件不知怎样选择,这里介绍一些方法以帮助project师高速准确地选择产品. WIZnet的产品有一个共同的特性.那就硬件TCPI ...
- X86架构下Linux启动过程分析
1.X86架构下的从开机到Start_kernel启动的整体过程 这个过程简要概述为: 开机-->BIOS-->GRUB/LILO-->Linux Kernel 其执行的流程图和重要 ...
- ios17--自定义控件2改进
控制器: // // XMGViewController.h #import <UIKit/UIKit.h> @interface XMGViewController : UIViewCo ...