利用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. CF1100E Andrew and Taxi 二分答案+拓扑排序

    \(\color{#0066ff}{ 题目描述 }\) 给定一个有向图,改变其中某些边的方向,它将成为一个有向无环图. 现在求一个改变边方向的方案,使得所选边边权的最大值最小. \(\color{#0 ...

  2. 数据结构14：队列（Queue），“先进先出”的数据结构

    队列是线性表的一种,在操作数据元素时,和栈一样,有自己的规则:使用队列存取数据元素时,数据元素只能从表的一端进入队列,另一端出队列,如图1. 图1 队列示意图 称进入队列的一端为“队尾”:出队列的一端 ...

  3. vue 学习一

    这个是很早之前公司要使用vue.js时候学习记在有道云笔记上的,发觉那个笔记贼多了,没办法,觉得是要换个地方存笔记了, 一vue.js的使用: 可以在页面是直接使用: <!DOCTYPE htm ...

  4. beego 连接postgres

    package main import ( "fmt" "github.com/astaxie/beego/orm" "mybee/models&qu ...

  5. ubuntu14.04 apt-get install找不到软件，更换源解决

    安装14.04后,有时使用apt-get命令安装程序,会提示找不到程序,这是因为软件源不正确,网上说的换163的.中科大的.阿里的等等,我在更新源的时候都会出错,一般是报404错误,网上也没找到好的办 ...

  6. Go语言基础练习题系列2

    1.练习1 生成一个随机数,让一个用户去猜这个数是多少? 代码示例如下: package main import ( "fmt" "math/rand" //m ...

  7. sqlserver 数据库阻塞和死锁

    参考原文:http://blog.csdn.net/ha196200/article/details/44985597 (1) 数据库阻塞: 假设第一个连接T1占有且没有释放资源,第二个连接T2请求同 ...

  8. Oracle trunc函数使用

    select to_char(sysdate, 'yyyy-mm-dd hh24:mi:ss'), to_char(trunc(sysdate), 'yyyy-mm-dd hh24:mi:ss') f ...

  9. redis的三种启动方式,个人常用第二种

    redis的启动方式1.直接启动  进入redis根目录,执行命令:  #加上‘&’号使redis以后台程序方式运行 1 ./redis-server & 2.通过指定配置文件启动  ...

  10. Silverlight 减小 Xap 的大小

    当Silverlight工程引用了很多dll后,加载的速度就会很慢,通过下面方式可以减小xap包的大小 勾选 “通过使用应用程序库缓存减小xap大小”,勾选此项后vs会自动将微软自身和外部引用不变的d ...