利用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. luogu2486 [SDOI2011]染色

    link 题目大意:给定一个N个点的树,每个点有一个颜色 有M次操作,每次可以修改树某条链所有点变成一个颜色,查询某条链上点的颜色段数 树剖,线段树维护区间合并 我的代码记录的是某个区间左端点颜色.右 ...

  2. 牛客国庆集训day6 B Board （模拟标记思维或找规律或分块？？？）

    链接:https://www.nowcoder.com/acm/contest/206/B来源:牛客网 题目描述 恬恬有一个nx n的数组.她在用这个数组玩游戏: 开始时,数组中每一个元素都是0. 恬 ...

  3. Java基础笔记（十八）——多态

    多态表示同一个操作作用在不同对象时,会有不同的结果. 多态可分为编译时多态和运行时多态. 编译时多态:方法重载,编译时就可以确定到底调用哪个方法,可以被看做一个类中的方法多态性. 运行时多态:只有在运 ...

  4. Maven入门（二）pom.xml和核心概念

    一.pom.xml文件说明 1.pom意思就是project object model. 2.pom.xml包含了项目构建的信息,包括项目的信息.项目的依赖等. 3.pom.xml文件是可以继承的,大 ...

  5. bcb6重启应用程序

    在工程的cpp文件中WinMain还是得最后添加如下的代码(其中g_blsRunAgain为bool类型的全局变量,在需求重启的时候先将g_blsRunAgain置为true,再将程序关闭,之后就会重 ...

  6. AngularJs 中使用OpenLayer例子,手机端地图加载不显示问题

      var map, toolip, overlay;            var layer = new ol.layer.Vector();            var imgLayer = ...

  7. poj3111 选取物品（二分+贪心）

    题目传送门 题意就是,n个物品,从中选取k个,要按照那个公式所取的值最大. 思路:最大化平均值的时候首先想到的就是二分, 我们设G(x) 为单位的重量不小于X, 我们的目标就是要找到满足条件的最大的X ...

  8. UVALive 3645 时序模型

    按航班拆点 注意返边的条件 #include<bits/stdc++.h> using namespace std; const int maxn = 1e6+11; const int ...

  9. jdk源码分析——java.lang.Boolean

      1.Boolean类里面的2个静态变量. Boolean类,直接声明了2个静态变量,TRUE 和 FALSE,指向2个对象.     public static final Boolean TRU ...

  10. Factorization Machines with libFM 论文阅读

    Factorization Machines with libFM https://pan.baidu.com/s/1aAyhHGNSrZQFDfoz8VsHIQ libFM网站:http://www ...