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 ...
随机推荐
- Linux Shell多进程并发以及并发数控制
1. 基础知识准备 1.1. linux后台进程 Unix是一个多任务系统,允许多用户同时运行多个程序.shell的元字符&提供了在后台运行不需要键盘输入的程序的方法.输入命令后,其后紧跟&a ...
- PAT 1034. Head of a Gang (30)
题目地址:http://pat.zju.edu.cn/contests/pat-a-practise/1034 此题考查并查集的应用,要熟悉在合并的时候存储信息: #include <iostr ...
- WordPress公布新文章Email通知注冊用户
非常多WordPress博客都开放了用户注冊的功能,用户能够參与到博客的内容建设其中来.也就是一个博客由多个用户来写.如今有这种需求,怎样实如今某一个用户发表文章后.其它用户都能收到Email通知?以 ...
- java程序查不出数据来
同样的错误,不可再犯第三次!!! 数据库中是char,里面带空格,但在pl/sql中这样写可以查出来.如下: select ipostid from product t where ipostid= ...
- HDU3746 Cyclic Nacklace 【KMP】
Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- cocos2dx js文件加密为jsc文件
发布产品,脚本代码是必须要加密的 偶尔会出现编译后的jsc无法运行,或者某些jsb自定义的函数找不到, 最好将require("jsb.js")的全部内容整合到一个文件,然后编译j ...
- 各种会义PPT
http://vdisk.weibo.com/s/dBzv2siaHK2H http://vdisk.weibo.com/wap/u/3460619722 https://yunqi.aliyun.c ...
- 【转】针对iOS VS. Android开发游戏的优劣——2013-08-25 17
http://game.dapps.net/gamedev/experience/8670.html 问题:如果你正在一个新工作室开发一款新的平板/手机游戏,你会选择iOS还是Android? 回答: ...
- ssh-add命令
ssh-add命令是把专用密钥添加到ssh-agent的高速缓存中.该命令位置在/usr/bin/ssh-add ➜ ydoc git:(v2.0.0) ✗ sudo ssh-add ~/.ssh/i ...
- linux服务器下tomcat部署项目内存溢出
今天将一个项目部署到linux服务器上,结果tomcat在启动运行到一定时间后就报错.根据以往的经验,查了一些资料,终于解决了该问题并顺便解决了生产环境中的get方式中文传递乱码问题. tomcat启 ...