利用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. kuangbin专题十六 KMP&&扩展KMP HDU2609 How many (最小字符串表示法)

    Give you n ( n < 10000) necklaces ,the length of necklace will not large than 100,tell me How man ...

  2. PHP 实现实现多线程

    前言 前些天帮同事查一个问题,第一次接触到了 PHP 的多线程,原以为 PHP 普遍都是单线程模型,并不适合多线程领域,花些时间翻了几个多线程的项目源码之后,发现 PHP 的多线程也颇有可取之处,活用 ...

  3. composer.json 配置设置

    配置文件的值为 key:val 必须双引号包裹 一.配置文件 名字 name包名称由用户名名称和仓库名称组成包版本限制来请求Monolog软件包 1.0.*.这意味着1.0开发分支中的任何版本,或大于 ...

  4. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_元数据

    1.元数据简介 全称:metadata 属性:数据表集合 产地:面向 CLR 的编译器在托管模块中生成 2.元数据内部结构及与托管模块的关系 [概述] 托管模块中包含着元数据,元数据是由一组数据表组成 ...

  5. POJ3368

    http://poj.org/problem?id=3368 给出一个升序数组和 q 个查询.对每个查询,返回 a b 之间出现次数最多的那个元素的出现次数. 这一类区间查询的问题很容易想到用线段树来 ...

  6. thinkphp Model的使用

    4.1 放在哪儿?项目/模块/Model目录下以本教程为例,Home模块的Model/Home/Model/目录下 4.2 model类文件叫什么?模型名: DemoModel.class.php 4 ...

  7. my.梦幻手游_XP

    1.http://my.netease.com/thread-459708-1-1.html 2. 3.

  8. python 之django （一） Windows环境下Django 1.6.11开发环境搭建（简易版）

    转自 https://www.cnblogs.com/kkddij/p/4397163.html 需要安装如下部件: python 2.6.6 pip(最新版即可) Django 1.6.11 PyC ...

  9. Thread 1 cannot allocate new log, sequence 187398

    报错信息: Thread 1 cannot allocate new log, sequence 187398Checkpoint not complete 处理方法: 查看REDO日志组 selec ...

  10. robot framework 的AutoItLibrary常用关键字

    1.run 的用法,以及激活当前窗口