demo——06弹性和制作骰子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: skyblue;
}
.main{
width: 700px;
height: 700px;
margin: 0 auto;
border: 1px solid #FFCCCC;
}
#dice{
width: 300px;
height: 300px;
/*background: #0bd;*/
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
animation: run 5s infinite linear;
}
.wall{
width: 300px;
height: 300px;
position: absolute;
display: flex;
background: rgba(255,255,255,1);
border: 1px solid #000;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.dot{
width: 50px;
height: 50px;
background: #000;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
#one{
justify-content: center;
align-items: center;
-webkit-transform: translateZ(150px);
-moz-transform: translateZ(150px);
-ms-transform: translateZ(150px);
-o-transform: translateZ(150px);
transform: translateZ(150px);
}
#one .dot{
width: 100px;
height: 100px;
}
#two{
flex-direction: column;
justify-content: space-around;
align-items: center;
-webkit-transform: rotateY(90deg) translateZ(150px);
-moz-transform: rotateY(90deg) translateZ(150px);
-ms-transform: rotateY(90deg) translateZ(150px);
-o-transform: rotateY(90deg) translateZ(150px);
transform: rotateY(90deg) translateZ(150px);
}
#two .dot{
width: 100px;
height: 100px;
}
#three{
-webkit-transform: translateZ(-150px);
-moz-transform: translateZ(-150px);
-ms-transform: translateZ(-150px);
-o-transform: translateZ(-150px);
transform: translateZ(-150px);
}
#three .d{
width: 300px;
height: 300px;
transform-style: preserve-3d;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
display: flex;
justify-content: space-around;
align-items: center;
}
#four{
-webkit-transform: rotateY(90deg) translateZ(-150px);
-moz-transform: rotateY(90deg) translateZ(-150px);
-ms-transform: rotateY(90deg) translateZ(-150px);
-o-transform: rotateY(90deg) translateZ(-150px);
transform: rotateY(90deg) translateZ(-150px);
}
#four .up,
#four .down{
margin-top: 75px;
display: flex;
width: 150px;
height: 150px;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
#five{
justify-content: center;
align-items: center;
-webkit-transform: rotateX(90deg) translateZ(150px);
-moz-transform: rotateX(90deg) translateZ(150px);
-ms-transform: rotateX(90deg) translateZ(150px);
-o-transform: rotateX(90deg) translateZ(150px);
transform: rotateX(90deg) translateZ(150px);
}
#five .up,
#five .down{
display: flex;
width: 120px;
height: 150px;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
#six{
-webkit-transform: rotateX(90deg) translateZ(-150px);
-moz-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
-o-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-150px);
}
#six .up,
#six .down{
display: flex;
width: 150px;
height: 300px;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
@keyframes run{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="main">
<div id="dice">
<div id="one" class="wall">
<div class="dot"></div>
</div>
<div id="two" class="wall">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div id="three" class="wall">
<div class="d">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div id="four" class="wall">
<div class="up">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="down">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div id="five" class="wall">
<div class="up">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="dot"></div>
<div class="down">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div id="six" class="wall">
<div class="up">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="down">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
</div>
</body>
</html>
注意：在transform属性中属性值的顺序会直接影响到效果的出现；
demo——06弹性和制作骰子的更多相关文章
- 慕课网3-13编程练习：采用flex弹性布局制作页面主导航
小伙伴们,伸缩容器的属性我们已经学完了,接下来使用我们所学的伸缩容器属性完成下面的效果图. 要求: 1.logo.导航项.登录注册按钮这三项在水平和垂直方向上都对齐,而且他们之间的距离也相等. 2.导 ...
- Docker系列06—基于容器制作镜像并上传到Docker Registry
本文收录在容器技术学习系列文章总目录 1.制作镜像 1.1 镜像的生成途径 基于容器制作 dockerfile,docker build 本篇主要详细讲解基于容器制作镜像:基于dockerfile 制 ...
- Oracle PLSQL Demo - 06.LOOP循环，以IF判断退出[IF in LOOP]
declare v_sal ; begin loop v_sal :; dbms_output.put_line(v_sal); then exit; end if; end loop; end;
- CSS3制作分步注册表单
这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...
- 值得H5前端学习的60个JS插件(含DEMO演示)
下面也可以说是H5前端学习的js插件大全.基本包含了大部分的前端最前沿的js插件和库. 布局 SuperEmbed.js- 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式 ...
- Unity5中叹为观止的实时GI效果
http://www.manew.com/thread-43970-1-1.html 今天为大家分享unity与Alex Lovett共同使用unity5制作的Shrine Arch-viz Demo ...
- 版本控制 - SVN/TortoiseSVN
研读了blog: 1. http://www.open-open.com/lib/view/open1346982569725.html 2. http://www.360doc.com/conte ...
- 初次踏上GUI编程之路（有点意思，详细介绍了菜鸟的学习之路）
初次踏上GUI编程之路 —— 我的Qt学习方法及对Qt认识的不断转变 -> 开始接触GUI与开始接触Qt: 话说,我第一次看见“Qt”这一个名词,好像是在CSDN网站的主页上吧,因为CSDN好像 ...
- 推荐轻量高效无依赖的开源JS插件和库
目录 图片 布局 音频视频 编辑器 轮播图 弹出层 表单 存储 动画 时间 其它 CDN 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本.demo Lightgalle ...
随机推荐
- oc学习之路----代理模式
今天刚学完oc的代理模式,觉得有点新奇,第一次接触,原理 A完成一件事,但是自己不能完成,于是他找个代理人B 替他完成这个事情,他们之间便有个协议 (protocol),B继承该协议来完成A代理给他的 ...
- 关于SpingMVC实现文件下载你所不知道的
http://www.cnblogs.com/yolanda-lee/p/4683422.html 文件的上传下载一般在项目中还是非常实用的,此处专门整理一下文件的下载,至于文件的上传实现将在后续中补 ...
- ubuntu卸载qq2012
xianbin@xianbin-ThinkPad-E520:~$ sudo dpkg --purge wine-qq2012-longeneteam [sudo] password for xianb ...
- mysqltuner
http://mysqltuner.com/ MySQLTuner-perl MySQLTuner is a script written in Perl that will assist you w ...
- PERCONA-TOOLKIT 工具的安装与使用2
[root@server-mysql ~]# cd /usr/bin [root@server-mysql bin]# ls pt* pt-align pt-duplicate-key-checker ...
- phpcms 源码分析六：index文件
这次是逆雪寒对index.php的分析: /* [/php] [ 本帖最后由 逆雪寒 于 2007-12-25 16:12 编辑 ] 尽量每天都有新的东西每天都能进一小步 现在开始讲 index.ph ...
- bit,byte,char,string区别与基本类型认识
bit.byte.位.字节.汉字的关系 1 bit = 1 二进制数据 1 byte = 8 bit 1 字母 = 1 byte = 8 bit ...
- MySQL索引视图
一.索引 索引是存放在模式(schema)中的一个数据库对象,索引的作用就是提高对表的检索查询速度, 索引是通过快速访问的方法来进行快速定位数据,从而减少了对磁盘的读写操作. 索引是数据库的一个对象, ...
- C#的类型、变量和值
大学学了C#,工作也是使用C#,虽然在日常的开发中没什么大的问题,但个人觉得在C#的理解还不是很清晰,所以决定花一定的时间来理一理学过的知识,顺便革新下脑袋里的知识,因为坑爹的学校在教.net的时候, ...
- hbuilder用自己的服务
2016-03-10 以后写测试demo用Sublime3 http://docs.emmet.io/cheat-sheet/ 更多炫酷信息和emmet语法请参见: 视频demo 语法文档 2016- ...