css3做的3d旋转骰子

最新推荐文章于 2021-08-03 22:46:57 发布
最新推荐文章于 2021-08-03 22:46:57 发布
阅读量144 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/fjfd/articles/5946501.html
版权 
<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>旋转的正方体</title> 
  <style type="text/css">
    @-webkit-keyframes rotationX {
        from { 
          -webkit-transform: rotateX(0);
        }
        to { 
          -webkit-transform: rotateX(360deg);
        }
    }
    @-webkit-keyframes rotationY {
        from { 
          -webkit-transform: rotateY(0);
        }
        to { 
          -webkit-transform: rotateY(360deg);
        }
    }
     @-webkit-keyframes rotationZ {
        from { 
          -webkit-transform: rotateZ(0);
        }
        to { 
          -webkit-transform: rotateZ(360deg);
        }
    }
    @-moz-keyframes rotationX {
        from { 
          -moz-transform: rotateX(0);
        }
        to { 
          -moz-transform: rotateX(360deg);
        }
    }
    @-moz-keyframes rotationY {
        from { 
          -moz-transform: rotateY(0);
        }
        to { 
          -moz-transform: rotateY(360deg);
        }
    }
    }
    @-moz-keyframes rotationZ {
        from { 
          -moz-transform: rotateZ(0);
        }
        to { 
          -moz-transform: rotateZ(360deg);
        }
    }
    @-o-keyframes rotationX {
        from { 
          -o-transform: rotateX(0);
        }
        to { 
          -o-transform: rotateX(360deg);
        }
    }
    @-o-keyframes rotationY {
        from { 
          -o-transform: rotateY(0);
        }
        to { 
          -o-transform: rotateY(360deg);
        }
    }
    @-o-keyframes rotationZ {
        from { 
          -o-transform: rotateZ(0);
        }
        to { 
          -o-transform: rotateZ(360deg);
        }
    }
    @keyframes rotationX {
        from { 
          transform: rotateX(0);
        }
        to { 
          transform: rotateX(360deg);
        }
    }
    @keyframes rotationY {
        from { 
          transform: rotateY(0);
        }
        to { 
          transform: rotateY(360deg);
        }
    }
    @keyframes rotationZ {
        from { 
          transform: rotateZ(0);
        }
        to { 
          transform: rotateZ(360deg);
        }
    }
    body {
        background: black;
    }
    #space3d {
        -webkit-perspective: 800;
        -moz-perspective: 800;
        -o-perspective: 800;
        perspective: 800;
        -webkit-perspective-origin: 50% 10%;
        -moz-perspective-origin: 50% 10%;
        -o-perspective-origin: 50% 10%;
        perspective-origin: 50% 10%;
    }
    #pagegroup {
        position: relative;
        top: 160px;
        margin: 0 auto;
        height: 200px;
        width: 200px;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-animation-name: rotationY;
        -webkit-animation-duration: 8s;
        -webkit-animation-function: linear;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -moz-animation-name: rotationY;
        -moz-animation-duration: 8s;
        -moz-animation-function: linear;
        -moz-animation-iteration-count: infinite;
        -moz-animation-direction: alternate;
        -o-animation-name: rotationY;
        -o-animation-duration: 8s;
        -o-animation-function: linear;
        -o-animation-iteration-count: infinite;
        -o-animation-direction: alternate;
        animation-name: rotationY;
        animation-duration: 8s;
        animation-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    #pagegroup .page {
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(255, 255, 255,0.8);
        border: 1px solid white;
        border-radius: 12px;
        height: 200px;
        width: 200px;
        color: black;
        font-size: 124pt;
        text-align: center;
    }
    #pagegroup .page1 span{
        position:absolute;
        left:80px;
        top:80px;
        width:50px;
        height:50px;
        border-radius:50px;
        background:black;
        
    }
    #pagegroup .page2 span{
        position:absolute;
        left:100px;
        top:100px;
        width:50px;
        height:50px;
        border-radius:50px;
        background:black;
    }
     #pagegroup .page2 .one{
        position:absolute;
        left:40px;
        top:40px;
        width:50px;
        height:50px;
        border-radius:50px;
        background:black;
    }
    #pagegroup .page3 span{
        position:absolute;
        left:130px;
        top:130px;
        width:50px;
        height:50px;
        border-radius:50px;
        background:black;
    }
     #pagegroup .page3 .one{
        position:absolute;
        left:80px;
        top:80px;
        width:50px;
        height:50px;
        border-radius:50px;
        background:black;
    }
     #pagegroup .page3 .two{
        position:absolute;
        left:30px;
        top:30px;
        width:50px;
        height:50px;
        border-radius:50px;
        background:black;
    }
    #pagegroup .page4 ul{
        margin:0;
        padding: 0;
        position:absolute;
        left:60px;
        top:-20px;
        color:black;
        font-size:150px;
        list-style-type:disc;

    }
     #pagegroup .page4 ul li{
        float: left;
        margin-left:70px;
     }
      #pagegroup .page4 ol{
        margin:0;
        padding: 0;
        position:absolute;
        left:60px;
        top:60px;
        color:red;
        font-size:150px;
        list-style-type:disc;

    }
     #pagegroup .page4 ol li{
        float: left;
        margin-left:70px;
     }
     #pagegroup .page5 ul{
        margin:0;
        padding: 0;
        position:absolute;
        left:60px;
        top:-30px;
        color:black;
        font-size:150px;
        list-style-type:disc;

    }
     #pagegroup .page5 ul li{
        float: left;
        margin-left:70px;
     }
      #pagegroup .page5 ol{
        margin:0;
        padding: 0;
        position:absolute;
        left:60px;
        top:50px;
        color:black;
        font-size:150px;
        list-style-type:disc;

    }
     #pagegroup .page5 ol li{
        float: left;
        margin-left:70px;
     }
    #pagegroup .page5 span{
        position:absolute;
        left:70px;
        top:85px;
        width:40px;
        height: 40px;
        border-radius: 40px;
        background:red;
}
#pagegroup .page6 ul,ol{
    float:left;
}
 #pagegroup .page6 ul li{
        position:relative;
        left:90px;
        top:-140px;
        line-height:50px;
        color:black;
        font-size:120px;
        list-style-type:disc;
    }
      #pagegroup .page6 ol li{
        position:relative;
        left:120px;
        top:-140px;
        line-height:50px;
        color:red;
        font-size:120px;
        list-style-type:disc;

    }
    #pagegroup .page1 {
        -webkit-transform: translateZ(100px);
        -moz-transform: translateZ(100px);
        -o-transform: translateZ(100px);
        transform: translateZ(100px);
    }
    #pagegroup .page2 {
        -webkit-transform: rotateY(90deg) translateZ(100px);
        -moz-transform: rotateY(90deg) translateZ(100px);
        -o-transform: rotateY(90deg) translateZ(100px);
        transform: rotateY(90deg) translateZ(100px);
    }
    #pagegroup .page3 {
        -webkit-transform: rotateY(-90deg) translateZ(100px);
        -moz-transform: rotateY(-90deg) translateZ(100px);
        -o-transform: rotateY(-90deg) translateZ(100px);
        transform: rotateY(-90deg) translateZ(100px);
    }
    #pagegroup .page4 {
        -webkit-transform: rotateY(180deg) translateZ(100px);
        -moz-transform: rotateY(180deg) translateZ(100px);
        -o-transform: rotateY(180deg) translateZ(100px);
        transform: rotateY(180deg) translateZ(100px);
    }
    #pagegroup .page5 {
        -webkit-transform: rotateX(90deg) translateZ(100px);
        -moz-transform: rotateX(90deg) translateZ(100px);
        -o-transform: rotateX(90deg) translateZ(100px);
        transform: rotateX(90deg) translateZ(100px);
    }
    #pagegroup .page6 {
        -webkit-transform: rotateX(-90deg) translateZ(100px);
        -moz-transform: rotateX(-90deg) translateZ(100px);
        -o-transform: rotateX(-90deg) translateZ(100px);
        transform: rotateX(-90deg) translateZ(100px);
    }
    </style> 
 </head> 
 <body> 
  <!-- div#space3d>div#pagegroup>div.page.page${$}*6 --> 
  <div id="space3d"> 
   <div id="pagegroup"> 
    <div class="page page1">
     <span></span>
    </div> 
    <div class="page page2">
     <span></span> 
     <span class="one"></span>
    </div> 
    <div class="page page3"> 
     <span></span> 
     <span class="one"></span> 
     <span class="two"></span> 
    </div> 
    <div class="page page4"> 
     <ul>
      <li></li>
      <li></li>
     </ul> 
     <ol>
      <li></li>
      <li></li>
     </ol> 
    </div> 
    <div class="page page5"> 
     <ul>
      <li></li>
      <li></li>
     </ul> 
     <span></span> 
     <ol>
      <li></li>
      <li></li>
     </ol> 
    </div> 
    <div class="page page6"> 
     <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul> 
     <ol> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ol> 
    </div> 
   </div> 
  </div> 
  <button id="changeX">沿X轴旋转</button> 
  <button id="changeY">沿Y轴旋转</button> 
  <button id="changeZ">沿Z轴旋转</button> 
  <script type="text/javascript">
;(function() {
    var 
        win = this, 
        doc = win.document, 
        cube = doc.getElementById('pagegroup'), 
        changeX = doc.getElementById('changeX'), 
        changeY = doc.getElementById('changeY');
        changeZ = doc.getElementById('changeZ');
    win.addEventListener('load', ready, false);
    function ready() {
        changeX.addEventListener('click', rotationX, false);
        changeY.addEventListener('click', rotationY, false);
        changeZ.addEventListener('click', rotationZ, false);
    }
    function rotationX() {
        cube.style.webkitAnimationName = 'rotationX';
        cube.style.mozAnimationName = 'rotationX';
        cube.style.oAnimationName = 'rotationX';
        cube.style.animationName = 'rotationX';
    }
    function rotationY() {
        cube.style.webkitAnimationName = 'rotationY';
        cube.style.mozAnimationName = 'rotationY';
        cube.style.oAnimationName = 'rotationY';
        cube.style.animationName = 'rotationY';
    }
    function rotationZ() {
        cube.style.webkitAnimationName = 'rotationZ';
        cube.style.mozAnimationName = 'rotationZ';
        cube.style.oAnimationName = 'rotationZ';
        cube.style.animationName = 'rotationZ';
    }
}).call(this);
</script>  
 </body>
</html>

　　

转载于:https://www.cnblogs.com/fjfd/articles/5946501.html

amqki824644
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
掷骰：使用CSS3动画的简单3D骰子掷骰
01-28
掷骰子 CSS3 Animation提供的简单3D骰子滚动动画制作器。 香草JS 将dist / roll-a-die.js复制到您的库文件夹中将其加载到HTML脚本中 [removed][removed] 您可以使用链接https://unpkg.com/roll-a-die@1.3.0/dist/roll-a-die.js 。 切记将包裹号更新为最新的。 调用带有其选项的方法。 rollADie({ element, numberOfDice: 2, callback}); 使用npm（和CommonJS构建器） 使用npm安装。 npm install --save roll-a-die 用纱安装。 yarn add roll-a-die 导入图书馆 ES5 const rollADie = require('roll-a-die'); ES6 import rollADie from 'roll-a-die'; 调用方法 rollADie({ element,
CSS-3D之制作3D骰子
freesky的专栏
09-16 2130
CSS-3D之制作3D骰子 css3 3d其实还是转换的一种，css3提供了2D转换，里面有位移、缩放、旋转、斜拉，这些个效果都是在2d平面上的效果。那么3d其实就是多了一个维度，也就是多了个坐标轴。 页面中想做3d效果就需要一个东西，就是盛放3d变换的元素的容器，咱们把它叫做舞台，在stage的css加上transform-style: preserve-3d      可以不写哦（默认会判
CSS3骰子3D立方体旋转动画
09-19
CSS3骰子3D立方体旋转动画，纯CSS3代码，3D立方体自动循环翻转动画。可以自己设置六个面的文字，大小，颜色。
HTML5 掷骰子游戏 麻将骰子.rar
07-10
基于 HTML5 的掷骰子游戏，点击开始按钮，即可“掷”骰子，代码中有丰富的注释，对研究学习HTML5是很不错的范例。严格来说，这不是游戏，只是掷骰子的动画效果，可用于HTML5开发的掷骰子游戏中。
H5小游戏掷骰子
05-07
关于HTML5掷骰子的小游戏，用于学习基础HTML5的游戏编写。
CSS3制作3D骰子旋转动画特效
06-24
CSS3制作3D骰子旋转动画特效是一款鼠标移动控制正方体旋转动画特效。
css3-3d旋转-色子
09-30
这是一个利用css3技术实现的3d旋转,很多动画效果都可以通过css3去操作，下载下来即可使用，照片换成自己的就可以，还有布局你也可以随意更改，动画的频次也可以根据需求进行更改
CSS3 3D骰子翻转旋转动画
05-01
CSS3 3D骰子翻转旋转动画，点击按钮，3D骰子翻转旋转，能0°-270°翻转旋转。
CSS3骰子3D立方体旋转动画.zip
05-14
CSS3骰子3D立方体旋转动画.zip
CSS3 3D骰子多角度翻转特效
07-24
CSS3 3D骰子多角度翻转特效是一款3D立方体骰子，通过单击旋转轴控制骰子3D翻转特效。
css3中的那些3D效果
07-03 109
css3中的那些3D效果 1.碎碎念：为什么会有这篇文章呢，原因很简单，因为想发一个css的文章了，于是把以前的一些作品拿来充数。 2.预览地址： --a.作品1：https://hswlian.github.io/JavaScript-blog/%E6%89%87%E9%9D%A2%E5%8A%A8%E7%94%BB/index.html --b.作品2：https://hswlian...
css3 立体骰子
qq_25131799的博客
10-27 1021
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="//at.alicdn.com/t/font_537302_qv2v
用css3transform做出3D旋转的骰子
sdfujichao的博客
07-08 3601
这个效果利用了3D旋转平移，主要的注意点是当一个面旋转以后他的xyz轴还得按照以前的xyz轴来做，他的xyz轴并不是开始时吧的xyz轴的方向，他的xyz轴也同时受到了旋转的影响而发生改变。所以可以先平移然后在旋转。 .wrap{perspective: 1000px; width: 1000px; height: 600px; margin: 0 auto
H5+CSS3玩转骰子
zhangfan_12871的博客
08-18 2864
骰子 ul { margin: 200px; width: 200px; height: 200px; /*border: 2px solid black;*/ transform-style: preserve-3d; animation: aaa 5s infinite; } li { position: absolute; height: 100px; wid
纯CSS3制作骰子3D旋转动画效果
crippty的博客
03-18 5158
闲暇之余看了一些关于CSS3的3D动画方面的文章，自己写了一个3D骰子旋转动画效果，代码分享给大家。先直接上效果图：1.首先创建一个div用来装骰子（手动滑稽）&lt;div class="stage"&gt;&lt;div class="club&gt;&lt;div class="front"&gt;&lt;/div&gt;
自动旋转的骰子代码html,JS实现骰子3D旋转效果
weixin_35895056的博客
05-30 759
本文实例为大家分享了JS实现骰子3D旋转效果展示的具体代码，供大家参考，具体内容如下css部分代码：.dice_box {width: 400px;height: 400px;position:relative;margin:0 auto;perspective: 900px;-moz-perspective: 900px;-webkit-perspective: 900px;perspectiv...
html实现3D骰子
帅气的鎏氓兔
09-03 8390
Document *{ margin: 0; padding: 0; } body{ overflow: hidden; } .box{ list-style: none; width: 300px; height: 300px; position: relative; margin: 100px auto; trans
css3摇骰子,css3实现掷骰子（无图）
weixin_42144707的博客
08-03 891
抽奖或游戏之类的动画很多时候用到掷骰子，一般采用gif图片格式实现动画效果。gif图片占内存较大，用户体验不好，下面用css3实现的掷骰子效果，骰子点数、面和转动效果都是有css，css3完成的。截图gif图如下：骰子.gif；这个特么的有点快啊动态图；打开可见效果：链接网页http://htmlpreview.github.io/?https://github.com/buwu/simple/b...
css3 3d环形旋转菜单
最新发布
09-25
CSS3 3D环形旋转菜单是一种使用CSS3的3D转换属性和过渡属性实现的菜单效果。通过给每个菜单项设置在3D空间中的旋转角度，可以产生一个环形的菜单布局，并通过过渡属性实现菜单项的旋转效果。 首先，在CSS中定义一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值