html5——3D案例（立方体）
立方体：父盒子规定了3d呈现属性，立方体做旋转运动
移动顺序：1、每个盒子都先移动100px，然后再做相应的旋转 2、只有这样立方体的几何中心点与父盒子的几何中心点是一样的
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.square {
width: 200px;
height: 200px;
margin: 150px auto;
border: 1px solid #000;
border-radius: 50%;
position: relative;
transform-style: preserve-3d;
text-align: center;
font: 500 40px/200px "Microsoft YaHei UI";
/*transform: rotateX(-16deg) rotateY(17deg);*/
animation: gun 3s infinite linear;
} .square > div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
/*border: 1px solid #fff;*/
} .front {
background-color: orange;
transform: translateZ(100px);
} .back {
background-color: green;
transform: translateZ(-100px) rotateY(180deg);
} .left {
background-color: blue;
transform: translateX(-100px) rotateY(-90deg);
} .right {
background-color: silver;
transform: translateX(100px) rotateY(90deg);
} .top {
background-color: yellow;
transform: translateY(-100px) rotateX(90deg);
} .bottom {
background-color: yellow;
transform: translateY(100px) rotateX(-90deg);
} @keyframes gun {
0% {
transform: rotateX(0deg) rotateY(0deg); }
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<!--正方形-->
<div class="square">
<div class="left">左</div>
<div class="right">右</div>
<div class="top">上</div>
<div class="bottom">下</div>
<div class="front">前</div>
<div class="back">后</div>
</div>
</body>
</html>
html5——3D案例（立方体）的更多相关文章
- 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案例（音乐盒子、百度钱包）
1.音乐盒子:触碰盒子,盖子会打开 2.百度钱包:触碰钱包,钱包,会180度旋转 <!DOCTYPE html> <html lang="en"> < ...
- HTML5 3D动画效果
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
- 7款超酷HTML5 3D动画精选应用及源码
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
- 8款效果惊艳的HTML5 3D动画
1.HTML5 WebGL水面水波荡漾特效 之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错.今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大 ...
- 超给力的HTML5 3D动画欣赏及源码下载
HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...
- 无插件纯Web HTML5 3D机房 进阶篇（新增设备、线缆、巡查等功能）
前情提要 前阵子写了一篇无插件纯Web 3D机房,介绍了如何用html5在网页上创建无插件的精美3d机房场景.这两个月以来,陆续收到很多朋友的鼓(膝)励(盖),受宠若惊之余,对索要源代码的朋友都已经尽 ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- 转载 - JSONObject简介
出处: http://www.cnblogs.com/java-pan/archive/2012/04/07/JSONObject.html JSONObject简介 本节摘要:之前对JSON做了 ...
- vim下多行注释与解注释
1.多行注释 (1)按esc进入命令行模式 (2)按下Ctrl+v,进入区块模式,并使用上下键选择需要注释的多行 (3)按下“I”(大写)键,进入插入模式 (4)输入注释符(“//”或“#”等) (5 ...
- jQuery通过event获取点击事件的事件对象
要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流 事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息.注意事件对象只有在事件发生时才会 ...
- eclipse下载egit插件，实现代码git同步问题
1.使用egit后,怎样查看历史log信息? : Team -> Show in history可以查看版本历史提交记录 2.每次代码提交前,先fetch,再merge. 先fetch获得最新代 ...
- GNS3 使用SecureCRT
"D:\SecureCRT\SecureCRT.EXE" /SCRIPT D:\SecureCRT\DyRouter.vbs /ARG %d /T /TELNET %h %p st ...
- NSDate 工具
#import "NSDate+XMGExtension.h" @implementation NSDate (XMGExtension) /** * 是否为今天 */ - (BO ...
- LeetCode 917. Reverse Only Letters (仅仅反转字母)
题目标签:String 利用left, right 两个pointers, 从左右开始 互换 字母.如果遇到的不是字母,那么继续移动到下一个. Java Solution: Runtime beats ...
- Java 定时任务之Quartz
使用CronTrigger CronTrigger 能够提供比 SimpleTrigger 更有具体实际意义的调度方案,调度规则基于 Cron 表达式,CronTrigger 支持日历相关的重复时间间 ...
- ListView布局之View复用原理举例
1.简单介绍: ListView是android开发中经常使用的控件,系统自带的那些样式,我就不列举了. 今天主要看一下.一个模仿系统历史通话记录的ListView. 效果例如以下: 上面ListVi ...
- IE浏览器 多版本之间切换
由于Win7系统最低支持IE8的版本,不能通过安装IE7版本来达到要求. 有一个替代方案,通过IE自带Emulation来实现,实现步骤如下: 打开现有的IE浏览器 按下F12键 切换到“Emulat ...