一款基于css3麻将筛子3D翻转特效的实例教程
作者：佚名
字体：[ ] 来源：互联网 时间：12-31 10:05:37
这篇文章主要为大家介绍了一款基于css3麻将筛子3D翻转特效的实例教程，css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程
　　css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。
　　第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下：
&id=&outer&&&
&&&&&id=&group&&&
&&&&&&&&&class=&page&&id=&page1&.&&
&&&&&&&&&class=&page&&id=&page2&..&&
&&&&&&&&&class=&page&&id=&page3&...&&
&&&&&&&&&class=&page&&id=&page4&....&&
&&&&&&&&&class=&page&&id=&page5&.....&&
&&&&&&&&&class=&page&&id=&page6&......&&
　　　在body中定义一个叫做outer的div，它是最外层的div，用来提供一个3D场景，可以认为它是一个3D图形的展示平台，只有定义了这样一个div，才能够展示3D图形，此外定义一个class为group的div，用来盛放色子的六个平面，将它们组合在一起。最后再定义6个平行的div，表示色子的六个平面。
　　第二步，定义三维场景的css,代码如下：
#outer{ &&
&&&&&&&&&&&&&
&&&&&&&&&&&-webkit-perspective:500px; &&
&&&&&&&&&&&-WebKit-perspective-origin:&50%&50%; &&
&&&&&&&&&&&-moz-perspective:500px; &&
&&&&&&&&&&&-moz-perspective-origin:&50%&50%; &&
&&&&&&&&&&&overflow:&hidden; &&
&&&&&&&}&&
　　这里的perspective表示的是透过这个三维场景看到里面的三维效果的距离，值越大看到的效果越远，值越小，看到的效果越近。perspective-origin表示的是相对于浏览器哪个角度去观察三维图形，第一个参数表示X轴方向，第二个参数表示Y轴方向，可以使用单位值px,也可以使用百分比。为了达到兼容ff和chrome的目的，所以给相应的CSS名称前加上moz和WebKit前缀。这里有必要说一下css3中的坐标定义，如下：
　　在css3中，X轴正方向向右，Y轴正方向向下，Z轴正方向由屏幕内伸向屏幕外，这和立体几何中的坐标系定义不同。
　　第三步，为id为group的div设置css属性，这个div主要是将色子的6个平面组合在一起，便于定义整体动画效果，代码如下：
#group{ &&
&&&&&&&&&&&&width:&200 &&
&&&&&&&&&&&&height:&200 &&
&&&&&&&&&&&&position:& &&
&&&&&&&&&&&&-webkit-transform-style:preserve-3d; &&
&&&&&&&&&&&&-moz-transform-style:preserve-3d; &&
&&&&&&&&&&&&margin:&200px& &&
&&&&&&&&}&&
　　　　这里定义了该div的宽高，并定义其position为relative，便于其中的六个平面相对于这个div进行绝对定位，同时transform-style:preserve-3d这个属性告诉浏览器，所有transform变换都是在3D空间中的变换，而不是在2D空间中，同样为了兼容加上了前缀。
　　第四步，定义每个平面div的通用page属性，即每个色子平面共同的CSS属性，代码如下：
&&&&&&&&&&&width:&200px; &&
&&&&&&&&&&&height:&200px; &&
&&&&&&&&&&&position:&absolute; &&
&&&&&&&&&&&border-radius:&20px; &&
&&&&&&&&&&&text-align:&center; &&
&&&&&&&&&&&font-weight:&bold; &&
&&&&&&&&&&&opacity:&0.5; &&
&&&&&&&&&&&overflow:&hidden; &&
&&&&&&&&&&&filter:alpha(opacity=50); &&
&&&&&&&&&&&font-size:150px; &&
&&&&&&&&&&&word-break:break-all; &&
&&&&&&&&&&&word-wrap:break- &&
&&&&&&&}&&
　　这里定义了每个平面的宽高和其父div group的宽高相同，进行绝对定位，（只有绝对定位了，让其脱离文档流，才能够应用transform3D变换效果，否则只能在2D空间变换），需要说明的是word-break:break-word-wrap:break-这两句
　　第五步，定义每个平面的div的CSS属性
　　第一个平面：
#page1{ &&
background-color:&#10a6ce; &&
line-height:&100px; &&
　　为了区分每个平面，显示出3D效果，这里需要将相邻的div进行不同背景色的设置，第一个div默认位于XY平面，不作变换
　　第二个平面：
#page2{ &&
&&&&&&&&&&&background-color:&#0073b3; &&
&&&&&&&&&&&-webkit-transform-origin:rightright; &&
&&&&&&&&&&&-webkit-transform:rotateY(-90deg); &&
&&&&&&&&&&&-moz-transform-origin:rightright; &&
&&&&&&&&&&&-moz-transform:rotateY(-90deg); &&
&&&&&&&&&&&line-height:&100px; &&
&&&&&&&}&&
　　这里使用transform-origin来定义该平面以哪个边开始进行变换，这里以最右边的边沿着Y轴绕行-90度，同样为了兼容加上了前缀
　　第三个平面：
#page3{ &&
&&&&&&&&&&&&background-color:&#07 &&
&&&&&&&&&&&&-webkit-transform-origin: &&
&&&&&&&&&&&&-webkit-transform:rotateY(90deg); &&
&&&&&&&&&&&&-moz-transform-origin: &&
&&&&&&&&&&&&-moz-transform:rotateY(90deg); &&
&&&&&&&&&&&&line-height:&80 &&
&&&&&&&&}&&
　　第四个平面：
#page4{ &&
&&&&&&&&&&&&background-color:&#29B4F0; &&
&&&&&&&&&&&&-webkit-transform-origin:top; &&
&&&&&&&&&&&&-webkit-transform:rotateX(-90deg); &&
&&&&&&&&&&&&-moz-transform-origin:top; &&
&&&&&&&&&&&&-moz-transform:rotateX(-90deg); &&
&&&&&&&&&&&&line-height:&80px; &&
&&&&&&&&}&&
　　第五个平面：
#page5{ &&
background-color:&#6699cc; &&
-webkit-transform-origin:bottombottom; &&
-webkit-transform:rotateX(90deg); &&
-moz-transform-origin:bottombottom; &&
-moz-transform:rotateX(90deg); &&
line-height:&50px; &&
　　第六个平面：
#page6{ &&
background-color:&#10a6ce; &&
-webkit-transform:translateZ(-200px); &&
-moz-transform:translateZ(-200px); &&
line-height:&50px; &&
　　这个第六个平面需要沿着Z轴进行其宽高长度的平移，已达到连接其他平面的目的第六步，定义关键帧动画，代码如下：
@-moz-keyframes&scroll&{ &&
&&&&&&&&&&&0%&{ &&
&&&&&&&&&&&&&&&-moz-transform:rotateY(0deg)&rotateX(0deg)&; &&
&&&&&&&&&&&} &&
&&&&&&&&&&&50%&{ &&
&&&&&&&&&&&&&&&-moz-transform:rotateY(360deg)&rotateX(0deg)&; &&
&&&&&&&&&&&} &&
&&&&&&&&&&&100%&{ &&
&&&&&&&&&&&&&&&-moz-transform:rotateY(360deg)&rotateX(360deg); &&
&&&&&&&&&&&} &&
&&&&&&&} &&
&&&&&&&@-webkit-keyframes&scroll&{ &&
&&&&&&&&&&&0%&{ &&
&&&&&&&&&&&&&&&-webkit-transform:rotateY(0deg)&rotateX(0deg)&; &&
&&&&&&&&&&&} &&
&&&&&&&&&&&50%&{ &&
&&&&&&&&&&&&&&&-webkit-transform:rotateY(360deg)&rotateX(0deg)&; &&
&&&&&&&&&&&} &&
&&&&&&&&&&&100%&{ &&
&&&&&&&&&&&&&&&-webkit-transform:rotateY(360deg)&rotateX(360deg); &&
&&&&&&&&&&&} &&
&&&&&&&&&&&&&&&}&&
　　这里的动画分为两个阶段，从0%到50%，该色子沿着Y轴进行360度旋转，从50%到100%的时间内，沿着X轴再进行360度旋转，这样完成一次动画效果，同样为了兼容，给关键帧keyframes前面加上了前缀
　　第七步，在id为group的div中使用CSS调用前面定义的关键帧动画，这里由于需要改色子六个平面同时发生变换，所以需要在六个平面的父div上调用动画.
#group{ &&
&&&&&&&&&&&width:&200px; &&
&&&&&&&&&&&height:&200px; &&
&&&&&&&&&&&position:&relative; &&
&&&&&&&&&&&-webkit-transform-style:preserve-3d; &&
&&&&&&&&&&&-moz-transform-style:preserve-3d; &&
&&&&&&&&&&&margin:&200px&auto; &&
&&&&&&&&&&&-webkit-animation:scroll&8s&linear&0s& &&
&&&&&&&&&&&-moz-animation:scroll&8s&linear&0s& &&
&&&&&&&}&&
　　在第三步的结果上加上了animation:scroll 8s linear 0CSS属性，表示调用名为scroll的动画，一次动画完成时间为8s,动画变换的速度为匀速，立即开始执行动画并进行无限动画效果的循环。
大家感兴趣的内容
12345678910
最近更新的内容播放列表加载中...
正在载入...
分享视频：
嵌入代码：
拍下二维码，随时随地看视频
3D骰子传奇
上 传 者：
内容介绍：
3D骰子传奇
我来说点啥
版权所有 CopyRight
| 京网文[0号 |
| 京公网安备：
互联网药品信息服务资格证：（京）-非经营性- | 广播电视节目制作经营许可证：（京）字第403号
<img src="" width="34" height="34"/>
<img src=""/>
<li data-vid="">
<img src=""/><i data-vid="" class="ckl_plays">
<img width="132" height="99" src=""/>
在线人数：
<li data-vid="">
<img src=""/><i data-vid="" class="ckl_plays">
<img src="///img/blank.png" data-src=""/>
<img src="///img/blank.png" data-src="http://"/>
<li data-vid="" class="cfix">
src="///img/blank.png" data-src=""/>
<i data-vid="" class="ckl_plays">
<li data-vid="" class="cfix">
src="///img/blank.png" data-src=""/><i data-vid="" class="ckl_plays">
没有数据！
{upload_level_name}
粉丝 {fans_count}
{video_count}
{description}脚本简介js+css3实现3D骰子特效是一款滚动鼠标滚轮时可以放大，骰子会慢慢的变形一直到可以看骰子里的世界，效果非常棒。
特别说明：
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
各线路极速下载器通过p2p加速功能，帮助用户对于大文件能更好的加速下载。
其他普通下载点限制多线程，仅允许直接点击或另存为下载等单线程下载的软件，较适合小的文件下载！
如有侵犯您的版权，请及时联系(#换@)，我们将尽快处理。
& CopyRight , , Inc.All Rights Reserved.分类：|大小：1395K|日期：
英文名：Smart Dicer
介绍：这是个3D游戏，你要想办法将骰子移动到规定的位置上并且处于与之相同的点数，快来试一下这个意思的游戏吧。
请记住本站网址，点击，方便下次再玩
游戏中使用鼠标点击骰子不放，然后点击箭头控制骰子移动；点击下方的方向按钮变换视角。
提示：游戏要过关不仅要让骰子停在目标位置，而且还要让骰子背面的数字与目标位置的数字相同。
游戏加载完成后点击play - 再点击play game - 然后点击数字1开始游戏
开动脑筋，按要求将骰子停在指定位置即可过关。
请记住本站网址，点击，方便下次再玩。 《3D骰子》小游戏由4399用户提供。
相关游戏推荐
作品版权归作者所有，如果侵犯了您的版权，请，本站将在3个工作日内删除。温馨提示：抵制不良游戏，拒绝盗版游戏，注意自我保护，谨防受骗上当，适度游戏益脑，沉迷游戏伤身，合理安排时间，享受健康生活
| | |||||&关注：
||||&法律顾问：北京盛峰律师事务所
文明办网文明上网举报电话：&|&举报邮箱：&||
Copyright & 2004 -
All Rights Reserved. 四三九九网络股份有限公司 版权所有3D骰子_3D骰子游戏在线玩_3D骰子小游戏无敌版3D骰子||||||操作：点击箭头控制骰子移动/点击下方的方向按钮变换视角。3D骰子游戏其他版本玩过3D骰子的还玩过热门游戏专题推荐：操作说明：点击箭头控制骰子移动/点击下方的方向按钮变换视角。如何开始：点击“play”-“play game”-点击数字1。游戏介绍：这款3D视觉的骰子游戏里，你要将骰子移动到规定的位置上并且在上面显示相同的点数，一起来挑战下吧！类型：&&标签：&&大小：1.4MB游戏目标：开动脑筋，按要求将骰子停在指定位置即可过关。游戏评论：18793910577210438510303910180910135337611145687576