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 ...
随机推荐
- Identity-第三章 Authorize原理解析
本篇旨在解析Identity中角色限制的原理. 需要的工具:Visual Studio.Reflector 问题提出: 1.当我们需要限制某个Controller的名称只需要某个或者某几个角色访问,这 ...
- 最火的Android开源项目(一)
GitHub在中国 的火爆程度无需多言,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项 目很是必要.利用这些项目,有时能够 ...
- 淘宝HSF服务的原理以及简单的实现
淘宝HSF服务具体来说分三个应用:api接口,service服务,本地应用. 最基本的Api服务应该是十分干净的,不含方法,只有接口.它是要被打包(jar包的形式)到中央仓库去的. service服务 ...
- EM算法原理
在聚类中我们经经常使用到EM算法(i.e. Estimation - Maximization)进行參数预计, 在该算法中我们通过函数的凹/凸性,在estimation和maximization两步中 ...
- SilkTest天龙八部系列1-初始化和构造函数
SilkTest没有提供专门的构造函数机制,但是在类对象生成的过程中,会先初始化在类中申明的变量.我们可以在初始化该变量的时, 调用某些函数完成对象初始化工作,看上去好像是调用了构造函数一样.不过要记 ...
- jfinal上传下载
1. 上传 <form id="form1" method="post" enctype="multipart/form-data" ...
- linux mysql 卸载后重装
$sudo apt-get remove mysql-common清理残留数据:$sudo dpkg -l |grep ^rc|awk '{print $2}' |sudo xargs dpkg -P ...
- LoC
对于图片.Flash等非文本文件统计文件数量.文件大小: 对于文本文件统计文件数量.文本行数.字符数:
- log4j.properties文件配置--官方文档
Default Initialization Procedure The log4j library does not make any assumptions about its environme ...
- iOS之苹果和百度地图的使用
iOS中使用较多的3款地图,google地图.百度地图.苹果自带地图(高德).其中苹果自带地图在中国使用的是高德的数据.苹果在iOS 6之后放弃了使用谷歌地图,而改用自家的地图.在国内使用的较多的就是 ...