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 ...
随机推荐
- H5离线缓存机制-manifest
简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...
- 最火的Android开源项目（完结篇）
65. AndroidSideMenu AndroidSideMenu能够让你轻而易举地创建侧滑菜单.需要注意的是,该项目自身并不提供任何创建菜单的工具,因此,开发者可以自由创建内部菜单. 66. A ...
- Android多线程研究（4）——从一道面试题说起
有一道这种面试题:开启一个子线程和主线程同一时候运行,子线程输出10次后接着主线程输出100次,如此重复50次.先看以下代码: package com.maso.test; /** * * @auth ...
- Hadoop-2.2.0中文文档——MapReduce 下一代 -——集群配置
目的 这份文档描写叙述了怎样安装.配置和管理从几个节点到有数千个节点的Hadoop集群. 玩的话,你可能想先在单机上安装.(看单节点配置). 准备 从Apache镜像上下载一个Hadoop的稳定版本号 ...
- 前端JS开发框架-DHTMLX
一:介绍 dhtmlxSuite是一个JavaScript库,提供了一套完整的Ajax -驱动UI组件.我们能够使用dhtmlxSuite构建 简洁界面,快速性能,和丰富用户体验的企业级web应用程序 ...
- 一款很不错的FLASH时种插件
直接贴一段代码上来,大家看看效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- checkbox组件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- html笔记05：html、css、javascript综合案例
1.首先是html代码: <!-- markup time --> <div class="wrapper wb"> <div class=" ...
- 利用java开发一个双击执行的小程序
之前我们利用java写了很多东西,但是好像都没有什么实际意义. 因为有意义桌面小程序怎么都得有个界面,可是界面又不太好搞.或者 了解到这一层的人就少之又少了. 呀,是不是还得开辟一些版面来介绍awt和 ...
- CentOS 6.3 安装ATI显卡驱动
环境: centos 6.3 内核(GNU貌似大家都知道) 显卡:ATI Mobility Radeon HD 3470 安装显卡流程: 1.官网下载最新驱动 http://support.amd. ...