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的动画效果.本 ...
随机推荐
- CodeForces 362C
分析:首先我们要知道调用swap()函数的次数跟什么有关.可以观察发现在Insertion Sort里,当且仅当a[j](j∈[0,i)) > a[i]时会调用一次swap(),也就是说有多少个 ...
- 这个贴子的内容值得好好学习--实例详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化
感觉要DJANGO用得好,ORM必须要学好,不管理是内置的,还是第三方的ORM. 最最后还是要到SQL.....:( 这一关,慢慢练啦.. 实例详解Django的 select_related 和 p ...
- Ubuntu 16.04使用NASM编译时用ld链接程序出现：i386 架构于输入文件 sandbox.o 与 i386:x86-64 输出不兼容（I386 architecture in the input file sandbox.o is not compatible with i386: x86-64 output）
错误: 问题解决过程: 1.先确定CPU的架构 2.这是以64位架构的CPU,如果使用elf参数时,默认是以32位模式去处理,那么此时需要更精确的去指定这个模式,比如elf32(32位),elf64( ...
- bridge 上网
手头有一台机器上有一个虚拟机 虚拟机为桥接 本机为静态IP上网 想让虚拟机上网的方式是 本机不设ip 网卡设置DHCP. 虚拟机设置静态ip
- Set database resumable
You can use bellow command to make your session resumable. Which means that if your session hit spac ...
- java中POJO类和DTO类都要实现序列化
java中POJO类和DTO类都要实现序列化 java中POJO类和DTO类都要实现序列化 java中POJO类和DTO类都要实现序列化 序列化:序列化是将对象转换为容易传输的格式的过程.例如,可以序 ...
- 【CV论文阅读】Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks
由RCNN到FAST RCNN一个很重要的进步是实现了多任务的训练,但是仍然使用Selective Search算法来获得ROI,而FASTER RCNN就是把获得ROI的步骤使用一个深度网络RPN来 ...
- shell apt install 按tab键自动补全
insert if [ -f /etc/bash_completion ]; then . /etc/bash_completion fi to ~/.bashrc
- 一款炫酷Loading动画--载入失败
简单介绍 上一篇文章一款炫酷Loading动画–载入成功.给大家介绍了成功动画的绘制过程,这篇文章将接着介绍载入失败特效的制作. 相比成功动画,有了前面的经验,失败动画的过程就显得比較简单了. 动画结 ...
- java中inputstream的使用
java中的inputstream是一个面向字节的流抽象类,其依据详细应用派生出各种详细的类. 比方FileInputStream就是继承于InputStream,专门用来读取文件流的对象,其详细继承 ...