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 ...
随机推荐
- CentOS忘记root密码的解决方法
1.在开机启动的时候按键盘上的“E”键 或者“ESC”键,会进入如下界面. 2. 选择相应的内核,一般都是第二个选项,再次按“E”,出现下图,选择第二项,再次按“E”键 3. 经过第二步,这个画面可以 ...
- ubuntu13.04 Thinkpad W520安装nvidia显卡驱动
Ubuntu13.04 amd64 Thinkpad W520安装Nvidia显卡驱动 曾经在ubuntu11.10上成功安装Nvidia显卡驱动.但是自从机器(Thinkpad W520)更新到13 ...
- Android开发书籍推荐
当你看到这些文字时,那么恭喜你,你可能选择了一个无限可能的方向. Android,Google出品,信誉保证,你值得深入研究. 学习一样新事物或许有多种方式,报培训班,看视频,向高手请教等等,但一本好 ...
- 《编程导论(Java)·2.1.3改写(override)》
<编程导论(Java)·2.1.3改写(override)>,收集override内容. 方法改写(method overriding)是指对于父类定义的一个实例方法,同意子类提供自己的实 ...
- ActionBarSherlock
https://github.com/JakeWharton/ActionBarSherlock https://github.com/ddewaele/GoogleMapsV2WithActionB ...
- 简洁 Abstract Factory模式（3.1）
镇楼 在某些书中使用了二维图说明抽象工厂模式.非常好,可是yqj2065不喜欢他们的产品族/产品等级,改成品牌/产品类型. 抽象工厂模式(abstract factory pattern)较工厂方法模 ...
- mysqldump备份原理6
写在前面:我们在使用mysqldump备份数据时,请一定记住要加上 -q 参数,后果可能是很严重的,不要给自己挖坑哦.到底为什么呢,且听我慢慢道来! 先来看看 mysqldump –help 中,关于 ...
- 读写应用程序数据-NSUserDefault、对象归档（NSKeyedArchiver）、文件操作
ios中数据持久化存储方式一般有5种:NSUserDefault.对象归档(NSKeyedArchiver).文件操作.数据库存储(SQLite3).CoreData. 1.NSUserDefault ...
- magento addFieldToFilter()方法常用的过滤条件
记录一下Magento模型集合Model Collection中addFieldToFilter()方法常用的过滤条件.以下参数也同样适用于产品实体的addAttributeToFilter()方法. ...
- Character Studio