利用css3制作可旋转的骰子，效果图如下，也可以查看 demo：

首先是骰子的html结构，.page 是骰子的六个页面的 class，#one-#six分别表示六个面，.point 是骰子表面的点数：

　　<div id="diceWapper">

        <div id="dice">

            <div id="one" class="page">

                <div class="point first"></div>

            </div>

            ...

        </div>

    </div>

接着是控制骰子旋转方向和度数的控制器：

　　<div id="controler">

        <div class="direction">

            <span class="way">X 方向：<span id="xValue">0</span>度</span><input type="range" id="rotateX" min="-360" max="360" value="0" onchange="rotate()" />

        </div>

        ...

    </div>

通过css设置骰子各个面的位置，

首先设置 3d 场景：-webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; 场景离显示器距离 800，观察位置在显示器中间，

再设置 transform-style 转换类型为 3d 转换，

然后通过 position 来设置各个表面以及表面上点的位置，

最后用 transform-origin 给各个表面设置旋转轴的位置，和用 rotateX、rotateY、rotateZ 设置旋转角度：

　　#diceWapper{

        -webkit-perspective:;

        -webkit-perspective-origin: 50% 50%;

    }

    #dice{

        position: relative;

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

    }

    .page{

        -webkit-transition: -webkit-transform 1s linear;

        position:absolute;

    }

    #two {

        -webkit-transform-origin:right;

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

    }
　　...

最后就是通过 input:range 的 change 事件来控制不同方向的旋转角度，获取三个 range 的 value 来设置 #dice 的 webkitTransform 实现转动。

完整代码如下（可运行）：

<!DOCTYPE html>

<html>

<head>

    <title>css3骰子</title>

    <meta charset="utf-8"/>

    <style>

    *{margin:0;padding:0;}

    body{background-color: #D3D3D3;}

    #diceWapper{

        -webkit-perspective: 800;

        -webkit-perspective-origin: 50% 50%;

        width: 200px;

        height: 200px;

        margin: 200px auto;

    }

    #dice{

        width: 90px;

        height: 90px;

        position: relative;

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

    }

    .page{

        -webkit-transition: -webkit-transform 1s linear;

        position:absolute;

        width: 90px;

        height: 90px;

        background-color: #F8F8FF;

    }

    #two {

        -webkit-transform-origin:right;

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

    }

    #three {

        -webkit-transform-origin:bottom;

        -webkit-transform: rotateX(90deg);

    }

    #four {

        -webkit-transform-origin:top;

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

    }

    #five {

        -webkit-transform-origin:left;

        -webkit-transform: rotateY(90deg);

    }

    #six {

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

    }

    .point{

        width: 20px;

        height: 20px;

        box-sizing:border-box;

        margin: 5px;

        border-radius:20px;

        border:2px solid #d7d7d7;

        background-color: #FF4040;

        position: absolute;

    }

    #one .first{left:30px;top:30px;}

    #two .first{left:30px;top:15px;}

    #two .second{left:30px;top:45px;}

    #three .first{left:0px;top:0px;}

    #three .second{left:30px;top:30px;}

    #three .third{left:60px;top:60px;}

    #four .first{left:15px;top:15px;}

    #four .second{left:45px;top:15px;}

    #four .third{left:15px;top:45px;}

    #four .fourth{left:45px;top:45px;}

    #five .first{left:15px;top:15px;}

    #five .second{left:45px;top:15px;}

    #five .third{left:15px;top:45px;}

    #five .fourth{left:45px;top:45px;}

    #five .fifth{left:30px;top:30px;}

    #six .first{left:15px;top:0px;}

    #six .second{left:45px;top:0px;}

    #six .third{left:15px;top:30px;}

    #six .fourth{left:45px;top:30px;}

    #six .fifth{left:15px;top:60px;}

    #six .sixth{left:45px;top:60px;}

    #controler{

        width: 300px;

        margin: 0 auto;

    }

    .way{width: 150px;display: inline-block;}

    input:range{width: 150px;display: inline-block;}

    </style>

    <script type="text/javascript">

    function rotate(){

        var x = document.getElementById("rotateX").value;

        var y = document.getElementById("rotateY").value;

        var z = document.getElementById("rotateZ").value;

        document.getElementById('dice').style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";

        document.getElementById('xValue').innerText = x;

        document.getElementById('yValue').innerText = y;

        document.getElementById('zValue').innerText = z;

    }

    </script>

</head>

<body>

    <div id="diceWapper">

        <div id="dice">

            <div id="one" class="page">

                <div class="point first"></div>

            </div>

            <div id="two" class="page">

                <div class="point first"></div>

                <div class="point second"></div>

            </div>

            <div id="three" class="page">

                <div class="point first"></div>

                <div class="point second"></div>

                <div class="point third"></div>

            </div>

            <div id="four" class="page">

                <div class="point first"></div>

                <div class="point second"></div>

                <div class="point third"></div>

                <div class="point fourth"></div>

            </div>

            <div id="five" class="page">

                <div class="point first"></div>

                <div class="point second"></div>

                <div class="point third"></div>

                <div class="point fourth"></div>

                <div class="point fifth"></div>

            </div>

            <div id="six" class="page">

                <div class="point first"></div>

                <div class="point second"></div>

                <div class="point third"></div>

                <div class="point fourth"></div>

                <div class="point fifth"></div>

                <div class="point sixth"></div>

            </div>

        </div>

    </div>

    <div id="controler">

        <div class="direction">

            <span class="way">X 方向：<span id="xValue">0</span>度</span><input type="range" id="rotateX" min="-360" max="360" value="0" onchange="rotate()" />

        </div>

        <div class="direction">

            <span class="way">Y 方向：<span id="yValue">0</span>度</span><input type="range" id="rotateY" min="-360" max="360" value="0" onchange="rotate()" />

        </div>

        <div class="direction">

            <span class="way">Z 方向：<span id="zValue">0</span>度</span><input type="range" id="rotateZ" min="-360" max="360" value="0" onchange="rotate()" />

        </div>

    </div>

</body>

</html>

css3骰子（transform初识）的更多相关文章

  1. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  2. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  3. 用CSS3的transform来做一个立方体

    有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效 ...

  4. HTML5之CSS3 3D transform 剖析式学习之一

    最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...

  5. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  6. css3 变形(transform)、转换(transition)和动画(animation)

    http://www.w3cplus.com/content/css3-transform/  在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...

  7. CSS3 2D Transform

    在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...

  8. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  9. css3之transform的应用

    一.利用transform实现图片额外显示 效果图如下 初始状态:

随机推荐

  1. luogu3455 [POI2007]ZAP-Queries 简单的莫比乌斯反演

    link ms是莫比乌斯反演里最水的题... 题意:对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d. 多组询问, T<=50000, ...

  2. luogu1891 疯狂lcm ??欧拉反演?

    link 给定正整数N,求LCM(1,N)+LCM(2,N)+...+LCM(N,N). 多组询问,1≤T≤300000,1≤N≤1000000 \(\sum_{i=1}^nlcm(i,n)\) \( ...

  3. socket中close发生的事情,RST,pipe信号错误

    1.server端close之后,client端write,导致server端发送RST(服务器关闭套接字):对方已经关闭或者异常终止,但是client端,不知道,这个成为半打开 当server端cl ...

  4. 牛客寒假算法基础集训营4 C Applese 走迷宫

    链接:https://ac.nowcoder.com/acm/contest/330/C来源:牛客网 精通程序设计的 Applese 双写了一个游戏. 在这个游戏中,它被困在了一个 n×m迷宫 在迷宫 ...

  5. shell脚本学习一

    shell脚本是一种程序与linux内核的语言: 第一个shell脚本: #!/bin/bash echo "cxy" 就是输出cxy 如何执行这个脚本呢: cd demo 进入s ...

  6. POJ1056 IMMEDIATE DECODABILITY & POJ3630 Phone List

    题目来源:http://poj.org/problem?id=1056   http://poj.org/problem?id=3630 两题非常类似,所以在这里一并做了. 1056题目大意: 如果一 ...

  7. ubuntu开机自启动服务管理

    安装sysv-rc-conf sudo apt-get install sysv-rc-conf 执行下面,查看服务情况 sudo sysv-rc-conf 启动服务有以下两种方式 update-rc ...

  8. day_06 再谈编码

    1. 小数据池(常量池) 1.id() 通过id()查询一个变量在内存中的地址 2.is和== 1.is 判断左右两端内存地址是否一致,如果返回值是TRUE,则可以判断这两个变量值是同一对象 2.== ...

  9. ubuntu下用apt-get安装lamp缺少mcrypt , curl

    用apt-get安装的LAMP环境,但安装magento报没有mcrypt和curl,   解决方法如下: curl安装: sudo apt-get install curl libcurl3 lib ...

  10. VMware Workstation 12.5.9 Pro虚拟机软件中文版

    更新为 VMware Workstation 12.5.9 pro版.VMware虚拟机软件无疑是windows系统下最强大好用的虚拟机软件.最新的VMware Workstation 12 Pro ...