css3骰子（transform初识）
利用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初识）的更多相关文章
- CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- 实用CSS3的transform实现多种动画效果
查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...
- 用CSS3的transform来做一个立方体
有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效 ...
- HTML5之CSS3 3D transform 剖析式学习之一
最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...
- 好吧，CSS3 3D transform变换，不过如此！
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- css3 变形(transform)、转换(transition)和动画(animation)
http://www.w3cplus.com/content/css3-transform/ 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...
- CSS3 2D Transform
在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...
- CSS3 3D Transform
CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...
- css3之transform的应用
一.利用transform实现图片额外显示 效果图如下 初始状态:
随机推荐
- 「FJ2014集训」采药人的路径
啦啦啦 来写一篇题解 洛谷链接: P4930 「FJ2014集训」采药人的路径 统计路径?嗯往点分治上想. 把0和1转化为-1和1,求和完dis为0的路径就是阴阳平衡的路径了. 如果题目没有限制要有中 ...
- Docker部署MySql应用
1. MySQL部署 1.1拉取MySQL镜像 docker pull mysql 查看镜像 docker images 1.2创建MySQL容器 docker run -di --name piny ...
- APP设计规范
设计师DPI指南 本指南旨在为初级到中级设计人员提供“入门”或介绍性阅读,他们希望从一开始就学习或获得有关跨DPI和跨平台设计的更多知识. 尽可能少的数学和没有不可解析的图形,只需在简短的部分中订购直 ...
- java 在web应用中获取本地目录和服务器上的目录不一致的问题
先来讲讲我所遇到的问题.最近有个新的项目添加新的功能. 修改之后部署到服务器上面发现取到classpath目录跑到别的地方去了.在本地测试却正常. 当时毛的着火了.硬是想不懂什么问题. 终于发现了这个 ...
- 关于c++中const的基本用法
c++中的const 有点类似于c里的宏定义#define,但是似乎是在宏定义基础上的代码优化,具体我解释不清,下面主要提到的是 const 在c++中的3中基本用法: 1.指向常量的指针 例如:co ...
- P3796 【模板】AC自动机
传送门 AC自动机的模板 简单的理解就是字典树上的KMP 注意数组不要开太大 不然每次memset耗时太多 有一个小优化 每次走 fail 边找匹配时只有一些会更新答案 那么就可以把没用的fail边压 ...
- day31 管道 进程池 数据共享
1. 管道(了解) #创建管道的类: Pipe([duplex]):在进程之间创建一条管道,并返回元组(conn1,conn2),其中conn1,conn2表示管道两端的连接对象,强调一点:必须 ...
- 在开发系统时候运行程序突然报出“WebDev.WebServer40.exe已停止工作”的错误的解决办法
问题描述:在开发系统时候运行程序突然报出“WebDev.WebServer40.exe已停止工作”的错误,程序调试运行,发现程序在打开数据库时候报错,也就是Connection.Open()处. 但是 ...
- 数据结构---Java---ArrayList
public class ArrayList<E> extends AbstractList<E> implements List<E>, RandomAccess ...
- android shape.xml 属性详解
转载源:http://blog.csdn.net/harvic880925/article/details/41850723 一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标 ...