利用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. 关于如何在Windows下测交互题

    这里的交互题指的NOI风格的交互题,即交互库 codeforces风格的交互题...只能自己实现评测插件了 使用Cena,Lemon没有附加文件功能不能评测交互题 在编译选项g++编译命令源文件中加入 ...

  2. 解决部分在Debug模式下程序没问题但是Release模式下出现问题的方法

    编译策略介绍 关于优化级别:GCC_OPTIMIZATION_LEVEL 描述如下 None: Do not optimize.  [-O0]With this setting, the compil ...

  3. List<T> 循环修改其中的数据

    List<MyObject> myObject = new List<MyObject>(); myObject.ForEach(w => { w.字段1=123: if ...

  4. php fsockopen使用

    函数说明:fsockopen — 打开一个网络连接或者一个Unix套接字连接 语法: resource fsockopen ( string $hostname [, int $port = -1 [ ...

  5. 2016 Multi-University Training Contest 10 [HDU 5861] Road （线段树：区间覆盖+单点最大小）

    HDU 5861 题意 在n个村庄之间存在n-1段路,令某段路开放一天需要交纳wi的费用,但是每段路只能开放一次,一旦关闭将不再开放.现在给你接下来m天内的计划,在第i天,需要对村庄ai到村庄bi的道 ...

  6. Java线程同步之静态方法

    静态方法是同步方法:自动加锁,锁的对象是类对象 public static void main(String[] args) { Thread [] threadArr=new Thread[10]; ...

  7. input keyup的时候实现内容过滤

    当在文本框中输入关键字,就会搜索出包含关键字的数据 实现: 只需要一个内容过滤即可 <body> <input type="text" id="sear ...

  8. day 006 小数据池和再谈编码

    1.小数据池. 目的:缓存我们的字符串,整数,布尔值.在使用的时候不需要创建过多的对象 缓存: int str bool int 范围:-5~256 str: 1.长度小于等于1,直接缓存 2.长度大 ...

  9. python3 zip()函数笔记

    a=[1,2,3]b=[4,5,6] for A ,B in zip(a,b):#用zip()函数整体打包 print(A,B)

  10. java课后思考题（四）

    1. 请运行以下示例代码StringPool.java,查看其输出结果.如何解释这样的输出结果?从中你能总结出什么? 输出结果: 结论: 在Java中,内容相同的字串常量(“Hello”)只保存一份以 ...