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实现图片额外显示 效果图如下 初始状态:
随机推荐
- Buy or Build UVA - 1151 Kruskal+枚举
题意: 大概意思是有 n 个点,现在有 q 个方案 ,第 i 个方案耗费为 ci ,使 Ni 个点联通 ,当然也可以直接使两点联通 ,现求最小生成树的代价. 两点直接联通的代价是欧几里得距离的平方: ...
- 【模板】割点（割顶） Tarjan
题目背景 割点 题目描述 给出一个nnn个点,mmm条边的无向图,求图的割点. 输入输出格式 输入格式: 第一行输入n,mn,mn,m 下面mmm行每行输入x,yx,yx,y表示xxx到yyy有一条边 ...
- kuangbin专题七 HDU1754 I Hate It （单点修改维护最大值）
很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师的询问.当然,老师有 ...
- 安装 zookeeper
https://www.w3cschool.cn/zookeeper/zookeeper_cli.html ZooKeeper是一种分布式协调服务,用于管理大型主机.在分布式环境中协调和管理服务是一个 ...
- ssh 配置无密码登录
下框中在管理机上运行: [root@master ~]# ssh-keygen -t rsa #它在/root/.ssh下生成id_rsa和id_rsa.pub两个文件 [root@master ~] ...
- Centos6.8 yum安装LNMP
1.Centos6系统库中默认是没有nginx的rpn包的,所以我们需要先更新下rpm依赖库 (1):使用yum安装nginx,安装nginx库 rpm -Uvh http://nginx.org/p ...
- Gym - 101572E Emptying the Baltic bfs加剪枝
题目传送门 题目大意:给出一幅海洋的描述,0为海平面,负数即有水,在给出的xy坐标的底部安放抽水机,问最多能有多少水.水往低处流,且八个方向都可以. 思路:bfs,记录到每一个节点有效的最低海平面,然 ...
- Nginx根据目录自动生成二级域名
前言: 每次创建二级域名如果都修改一次配置文件的话,项目多了会带来很多不必要的工作量,如果能够在一个web目录下创建一个文件夹并且自动生成文件目录的话,那真是极好的,本文就基于Nginx贴出这 ...
- Go语言学习包（1）之bufio包
参考网址: https://blog.csdn.net/wangshubo1989/article/details/70177928
- 基本数据类型 list and tuple 04
列表和元组 一,列表 1.列表 由[]括起来 可以存放各种数据类型: 存放量比较大 2.列表的索引和切片 列表也有索引 lst [i] i 即列表中各元素的位置 2.1列表的切片 lst[star ...