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 ...
随机推荐
- codevs1213 解的个数
题目描述 Description 已知整数x,y满足如下面的条件: ax+by+c = 0 p<=x<=q r<=y<=s 求满足这些条件的x,y的个数. 输入描述 Input ...
- Linux下汇编语言学习笔记74 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- 欧拉回路输出（DFS，不用回溯！）Watchcow POJ 2230
Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 8109 Accepted: 3551 Special Judge D ...
- [poj1704]Georgia and Bob_博弈论
Georgia and Bob poj-1704 题目大意:题目链接 注释:略. 想法:我们从最后一个球开始,每两个凑成一对.如果有奇数个球,那就让第一个球和开始位置作为一对. 那么如果对手移动的是一 ...
- HDU——1133 Buy the Ticket
Buy the Ticket Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...
- installshield中的installscript编程
上一篇说道了InstallShield高速建立一个打包程序,如今说说InstallShield里面的installscript脚本. 该文属于个人理解.參考一些相关文章. 相关资料下载地址:http: ...
- python基础学习之02 序列
#encoding=utf-8 import math a=[1,23,4,5,6] print a a[1:1]=[2,3,5] print a a a[1]='a' print a a[1]={1 ...
- WPF 有趣的动画效果
WPF 有趣的动画效果 这一次我要呈上一个简单的文章,关于给你的WPF apps加入美丽的光线动画,可是我对动画这东西可能有点入迷了. 实际上.我对动画如此的入迷,以至 ...
- 避免死锁的银行家算法C++程序实现
本篇博文为追忆以前写过的算法系列第二篇(20081021) 温故知新 目的:具有代表性的死锁避免算法是Dijskstra给出的银行家算法.本实验是基于银行家算法的思想通过编写C++程序实现银行家 ...
- AutoLayout初战----Masonry与FDTemplateLayoutCell实践
学iOS也有几个月了.一直都是纯代码开发,菜鸟入门,到今天还处在Frame时代.刚好近期项目在提审.有点时间能够学学传说中的AutoLayout.事实上.就是android的相对布局(Relative ...