这个是3D旋转的进阶版，是一个类似与骰子的正方体。这个版本只有秒数的个位数，还没有写整个钟表，下面那个版本好好想想该怎么写

  1. 这个效果需要用到transform-style: preserve-3d。
  2. 利用transform: rotateX, rotateY, rotateZ来定义物体转动轴，实现3D旋转
  3. 给一个正方体设置6个面，每个面都设置旋转基面，并且直接先朝各个方向转90度，有一个面要注意，就是和最前面的那个面的对面，不用转，但是要用transform: translateZ()来让这个面沿着Z轴移动到后面，同时要让这个面上的数字或者文字还要translateX(180deg)，这样就能让背面的那个字转过来是正着的，否则它在背面是正的时候再转过来就变成倒着的了
  4. 为了让这个骰子有点看上去是有点往右倾斜，就想到给它rotateY(10deg)，但是直接加载box上会有问题，为了让它转动，已经加过一次transform:rotateX，再加一个transform会把这个覆盖，所以想到了，在这个box外面再加一个outerbox，让outerbox往右倾斜就可以。
  5. 在转动一次之后，要让即将转过来的那个面的数字变成下一秒的个位数
  6. 复习一下如何取到一个2位数的个位数字和十位数字。个位=x- parseInt(x/10)*10;十位数字=parseInt(x/10);
<style>
#wrap{
margin: 70px auto;
width: 100px;
height: 100px;
padding: 100px;
perspective: 900px; //注意要把perspective写最外面
}
#outerbox{
width: 100px;
height: 100px;
transform-origin: center center;
transform-style: preserve-3d; //为了让骰子总是向左斜10度，要在外面再加一层，并让它具有3d样式
transform: rotateY(10deg);
}
#box{
width: 100px;
height: 100px;
transform-style: preserve-3d;
% -49px;
,1.46);
position: relative;
}
#box div{
width: 98px;
height: 98px;
border: 1px solid black;
font: 50px/100px arial;
text-align: center;
position: absolute;
opacity: 0.4;
}
#box div:nth-of-type(2){
top: -100px;
transform-origin: bottom;
transform: rotateX(90deg);
}
#box div:nth-of-type(1){
}
#box div:nth-of-type(4){
top: 100px;
transform-origin: top;
transform: rotateX(-90deg);
}
#box div:nth-of-type(3){
transform: translateZ(-100px) rotateX(180deg);
}
#box div:nth-of-type(5){
left: 100px;
transform-origin: left;
transform: rotateY(90deg);
}
#box div:nth-of-type(6){
left: -100px;
transform-origin: right;
transform: rotateY(-90deg);
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
;
;
var aDiv = oBox.getElementsByTagName('div');
; i<aDiv.length; i++) {
aDiv[i].index = i;
}
 
function rote(){
var oDate = new Date();
var iSec = oDate.getSeconds();
;
);
oBox.style.transform = 'rotateX('+angle+'deg)';
;
){
;
}
document.title=iSecS;
aDiv[Index].innerHTML = iSecS;
Index++;
}
rote();
);
};
</script>
</head>
<body>
<div id="wrap">
<div id="outerbox">
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</body>

【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）上的更多相关文章

  1. 【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）下.md

    之前看到智能社主页的那个骰子样式的钟表,最近研究了一下,虽然没有仔细看他是怎么做的,但是学了css3的动画之后想自己尝试着写一下,用到的原理可能和智能社网站的不太一样,我自己主要用到了css3和js. ...

  2. 【巩固】CSS3的3D动画 ——3D旋转（1）

    最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve ...

  3. CSS3 动画3D视角下 旋转圆环

    首先是  transform 属性: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 加上对应属性则可得到3D透视效果下的形态 本次以圆形( ...

  4. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  5. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  6. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  7. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  8. css3 transition属性实现3d动画效果

    transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...

  9. css3图书3D动画

    css3图书3D动画,css3,立体特效,旋转效果,3D动画,css3图书3D动画是一款基于css3实现的立体旋转3D图书动画特效. 代码下载页:http://www.huiyi8.com/sc/71 ...

随机推荐

  1. codeforces 725D . Contest Balloons(贪心+优先队列)

    题目链接:codeforces 725D . Contest Balloons 先按气球数从大到小排序求出初始名次,并把名次排在第一队前面的队放入优先队列,按w-t-1值从小到大优先,然后依次给气球给 ...

  2. 如何通过pid快速找出进程的路径

    [carlton@oc3408554812 Desktop]$ top top - 09:35:06 up 32 min,  2 users,  load average: 1.49, 1.56, 1 ...

  3. erlang中的lists：foldl()的用法,格式转换实例应用

    lists:foldl(fun(),参数1,参数2):这个函数就是先把参数1传给fun()处理,然后将参数2(列表)中每一个元素,依次传给fun()函数进行处理. lists:foldl(fun(El ...

  4. Leetcode 155 Min Stack 小顶堆+栈,优先队列实现 难度:0

    https://leetcode.com/problems/min-stack/ #include <vector> #include <queue> #include < ...

  5. 2015 "BestCoder Cup" Champion

    这场比赛我没有参加,不过就算参加了也估计是被完虐.于是看着题解把大部分题目都搞了一遍. T1:Movie(hdu 5214) 题目大意: 给出N个区间,问能否选出3个互不相交的区间. N<=10 ...

  6. HTML5全局属性和事件

    全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等.HTML5中又新增了一些特殊功能的全局属性和事件.   属性:   HTML5属性能够赋给标签元素含义和语 ...

  7. 作业七：团队项目——Alpha版本冲刺阶段 001

    今天进展:准备开发环境,安装软件. 今天安排:因为软件过于庞大,所以我们第一天都在按软件,原本计划第一天要设计框架,但因为软件问题.所以我们决定留到第二天.

  8. HDU 1254

    http://acm.hdu.edu.cn/showproblem.php?pid=1254 暴搜,状态是四维的(箱子和人的坐标),向一个方向推箱子还要判断人能否走到推的位置,1A #include ...

  9. 十分钟了解分布式计算:Petuum

    Petuum是一个机器学习专用分布式计算框架,本文介绍其架构,并基于文章 More Effective Distributed ML via a Stale Synchronous Parallel ...

  10. SVG文档的注意事项

    SVG 是 HTML5 关于描述矢量图的元素.可以写在 <html> </html> 中,也可以保存为一个单独的.svg文件. 单独作为一个svg文件的时候,有一点规则需要注意 ...