美文网首页
立体骰子

立体骰子

作者: Ertsul | 来源:发表于2018-06-05 10:09 被阅读33次

效果图

3D骰子.gif

代码

直接上代码:

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>demo03</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
 *{
 margin: 0px;
 padding: 0px;
 /* opacity: .8;   // 不能在这里设置透明度啊~~ */
 }
 body{
 background-color: black;
 }
 ul#list{
 width: 150px;
 height: 150px;

 list-style: none;
 position: relative;

 margin: 100px auto;

 transition: 6s;
 transform-style: preserve-3d;
 }

 ul#list:hover{
 transform: rotateX(450deg) rotateY(450deg);
 }

 ul#list li{
 width: 100%;
 height: 100%;
 background-color: snow;
 border-radius: 4px;
 opacity: .6;
 box-sizing: border-box;
 padding: 15px;
 position: absolute;
 top: 0px;

 display: flex;
 }

 /* 设置点数的样式 */
 span{
 width: 35px;
 height: 35px;
 border-radius: 40px;
 background-color: snow;
 box-shadow: 0px 0px 20px rgba(125, 125, 125, .8)
 }

 ul#list li:nth-child(1){
 background-color: skyblue;
 transform: rotateX(0deg) translateZ(75px);

 justify-content: center;
 align-items: center;
 }

 ul#list li:nth-child(2){
 background-color: salmon;

 transform: rotateX(-90deg) translateZ(75px);

 justify-content: space-between;
 }
 ul#list li:nth-child(2) span:nth-child(2){
 align-self: flex-end;
 }

 ul#list li:nth-child(3){
 background-color: sandybrown;

 transform: rotateX(-180deg) translateZ(75px);

 justify-content: space-between;
 }
 ul#list li:nth-child(3) span:nth-child(2){
 align-self: center;
 }
 ul#list li:nth-child(3) span:nth-child(3){
 align-self: flex-end;
 }

 ul#list li:nth-child(4){
 background-color: fuchsia;

 transform: rotateX(90deg) translateZ(75px);

 flex-wrap: wrap;
 }
 ul#list li:nth-child(4) div{
 flex-basis: 100%;
 display: flex;

 justify-content: space-between;
 align-self: center;
 }

 ul#list li:nth-child(5){
 background-color: aquamarine;

 transform: rotateY(90deg) translateZ(75px);

 display: flex;
 flex-direction: column;
 }
 ul#list li:nth-child(5) div{
 flex-basis: 100%;
 display: flex;
 }
 ul#list li:nth-child(5) div:nth-child(1){
 justify-content: space-between;
 }
 ul#list li:nth-child(5) div:nth-child(2){
 justify-content:center;
 }
 ul#list li:nth-child(5) div:nth-child(3){
 justify-content: space-between;
 }

 ul#list li:nth-child(6){
 background-color: firebrick;

 transform: rotateY(-90deg) translateZ(75px);

 display: flex;
 flex-wrap: wrap;
 }
 ul#list li:nth-child(6) div{
 flex-basis: 100%;
 display: flex;
 justify-content: space-between;
 }
 ul#list li:nth-child(6) div:nth-child(2){
 align-self: center;
 }
 ul#list li:nth-child(6) div:nth-child(3){
 align-self: flex-end;
 }
 </style>
 </head>
 <body>
 <ul id="list">
 <li>
 <span></span>
 </li>
 <li>
 <span></span>
 <span></span>
 </li>
 <li>
 <span></span>
 <span></span>
 <span></span>
 </li>
 <li>
 <div>
 <span></span>
 <span></span>
 </div>
 <div>
 <span></span>
 <span></span>
 </div>
 </li>
 <li>
 <div>
 <span></span>
 <span></span>
 </div>
 <div>
 <span></span>
 </div>
 <div>
 <span></span>
 <span></span>
 </div>
 </li>
 <li>
 <div>
 <span></span>
 <span></span>
 <span></span>
 </div>
 <div>
 <span></span>
 <span></span>
 <span></span>
 </div>
 <div>
 <span></span>
 <span></span>
 <span></span>
 </div>
 </li>
 </ul>
 </body>
</html></pre>

相关文章

  • 立体骰子

    效果图 代码 直接上代码:

  • Python 使用matplotlib模块模拟掷骰子

    掷骰子 骰子类 折线图掷骰子 散点图掷骰子

  • 看着很和谐其实很撕逼的骰子城(Dice City)

    上期介绍了两款骰子游戏,然而本期我们接着介绍一款骰子游戏。有了骰子街,骰子镇,这次又来了一个骰子城。 骰子城是AE...

  • 一个Dice Building Game的粗略设计

    可参考游戏:1、Dice Forge 核心系统:骰子构建 属性: 骰子: 骰面数、骰子材质(等级)......骰...

  • 微信摇骰子小程序

    好玩的小程序-微信摇骰子小程序-ktv喝酒摇骰子-摇骰子游戏-酒桌游戏微信摇骰子(摇色子)小程序源码分享、学习交流。

  • n枚骰子点数和概率问题

    n枚骰子点数和概率问题 随意投掷n枚骰子,求每一种骰子点数和出现的概率。 设n枚骰子点数的和出现数目为,概率 1....

  • 桌游想法/1

    骰子是不可控的单驼峰,为平衡需要大量统计学且骰子越多越难算 抽卡在某种程度上比骰子更可控但容易出现“最优解” 骰子...

  • 拼读游戏怎么玩?

    拼读游戏怎么玩?请听Tyger分解摇动骰子-抽取闪卡-吃鱼时间-Bingo环节 初始环节-摇动骰子,骰子六个面分别...

  • 学习力践行20170710/D8

    1. "碰运气”,三个人每人10个格子,两个骰子,一个前进骰子,一个后退骰子,先用前进骰子,到达或超过6就得用后退...

  • 骰子

    1 “给我随便讲个故事吧!” 林坐在我对面,撑着脑袋,用小铁勺戳着高脚玻璃杯里的香草冰淇淋——先用勺子的侧沿随意切...

网友评论

      本文标题:立体骰子

      本文链接:https://www.haomeiwen.com/subject/tpcpsftx.html