SASS实现3D骰子效果

1.什么是SASS？

　　Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。 Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。 SASS是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

 

2.SASS与CSS有什么区别与联系？

　　CSS样式是用来修饰网页页面结构的； SASS是由buby语言编写的一款css预处理语言，进行网页样式设计，之后再编译成正常的css文件，以供项目使用，和html一样有严格的缩进风格，和css编写规范有很大的出入，是不使用花括号和分号的，所以不被广为接受。

 

3.设计目的和要求

　　目的：熟悉并了解SASS，利用CSS3样式表+JavaScript脚本语言，实现一个3D骰子效果。

　　要求：在Vscode环境中实现，骰子具有旋转效果，点击“开始”按钮，骰子自动旋转；点击“停止”按钮，骰子停止旋转；点击相应数字按钮，骰子转到相应点数。

 

4.三大代码部分

　　（1）HTML部分

　　　　　　

　　（2）CSS部分

               

　　（3）JavaScript部分

　　        

 

5.成品样式

　　　    

 

6.3D骰子如何实现？

　　利用css将一个面的相对位置设为基准，其它面以此相对位置基准分别设置一个角度代替面，最终面与面折叠形成3D效果。

 

7.3D骰子如何实现点击某个数字，骰子就转到某个数字面的？

　　每一个按钮都代表一个面，当点击按钮时，会将该面一开始设置的角度调出来，显示出来，就会实现点击跳转。

 

8.部分核心代码

　<div class="box">   <!--按钮盒子-->

        <input class="a" type="button" value="开始" onclick="Controller('start')"/>

        <input class="b" type="button" value="停止" onclick="Controller('stop')" />

        <br />  

        <input  class="c" type="button" value="1" onclick="Controller('1')"/>

        <input  class="c" type="button" value="2" onclick="Controller('2')"/>

        <input  class="c" type="button" value="3" onclick="Controller('3')"/>

        <input  class="c" type="button" value="4" onclick="Controller('4')"/>

        <input  class="c" type="button" value="5" onclick="Controller('5')"/>

        <input  class="c" type="button" value="6" onclick="Controller('6')"/>

    </div>

 

 

　.group{         /*骰子属性*/

    width: 200px;

    height: 200px;

    position: relative;  /*相对位置*/

    transform-style:preserve-3d;/*使其子元素保持3D转换*/

    -webkit-transform-style:preserve-3d;

    -moz-transform-style:preserve-3d;

    transform-origin:50% 50% -100px;/*设置骰子旋转的基点位置（骰子中心点）*/

    -webkit-transform-origin:50% 50% -100px;

    -moz-transform-origin:50% 50% -100px;

    margin: 25px auto;

    transform:scroll 3s linear 0s infinite;/*设置骰子动画效果*/

    -webkit-animation:scroll 3s linear 0s infinite;

    -moz-animation:scroll 3s linear 0s infinite;

    animation: scroll 3s linear 0s infinite;

    border-radius:20px;   /*边框圆弧度*/ 

    animation-play-state: paused;  /*开始为静止动画*/

} 

.page{        /*骰子表面样式*/

    width: 200px;

    height: 200px;

    position: absolute;

    border-radius: 20px;

    text-align: center;

    overflow: hidden;

    text-align: center;

    background-color:#E8E8E9;

    border:1px solid #E0E0E0; 

}

/*开始设置每个面的角度，将6个面拼成一个正方体*/

#page2{

    transform-origin:right;/*点数为2的面以右边为转轴转动*/

    transform:rotateY(-90deg);/*绕Y轴逆时针转动90度*/

    -webkit-transform-origin:right;

    -webkit-transform:rotateY(-90deg);

    -moz-transform-origin:right;

    -moz-transform:rotateY(-90deg);

}

#page3{

    transform-origin:left;/*点数为3的面以左边为转轴转动*/

    transform:rotateY(90deg);/*绕Y轴顺时针转动90度*/

    -webkit-transform-origin:left;

    -webkit-transform:rotateY(90deg);

    -moz-transform-origin:left;

    -moz-transform:rotateY(90deg);

}

#page4{

    transform-origin:top;/*点数为4的面以上边为转轴转动*/

    transform:rotateX(-90deg);/*绕X轴逆时针转动90度*/

    -webkit-transform-origin:top;

    -webkit-transform:rotateX(-90deg);

    -moz-transform-origin:top;

    -moz-transform:rotateX(-90deg);

}

#page5{

    transform-origin:bottom;/*点数为5的面以下边为转轴转动*/

    transform:rotateX(90deg);/*绕X轴顺时针转动90度*/

    -webkit-transform-origin:bottom;

    -webkit-transform:rotateX(90deg);

    -moz-transform-origin:bottom;

    -moz-transform:rotateX(90deg);

}

#page6{

    transform:translateZ(-200px);/*点数为6的面沿Z轴向后平移200px*/

    -webkit-transform:translateZ(-200px);

    -moz-transform:translateZ(-200px);

}

.page span {

    display:inline-block;

    width:50px;

    height:50px;

    border-radius:25px;

    background-color:#050505;

    box-shadow:inset 3px 3px 5px #000;/*骰子点数的阴影效果*/

}

/*下面是对点数样式的控制*/

#page1 span{

    position:absolute;

    left:50%;

    top:50%;

    margin-top:-25px;

    margin-left: -25px;

    background-color:#f00;

}

 

9.感悟与不足
　　通过本次sass实验3d骰子效果，我们组全部成员熟练并理解了什么是sass，怎样在Vscode环境中实现一个网页3d骰子的旋转效果。点击相应的数字，骰子就转到相应的点数。不足之处在于很难实现骰子的下坠的3d效果，查阅资料也很难找到相应的核心代码，但是网页布局很美观，弥补了实验的缺陷，使实现的3d骰子更具现实性，方便别人的使用。

　　

 

演示视频连接：

打开百度网盘复链接：https://pan.baidu.com/s/1ZcK9Idlnj7zbFhO9xM7bLA 

提取码：akan 

小组成员：赵文杰、 刘彤、 马传哲 、朱鹏程 、张德鲁