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

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

程序写到一半，发现只有chrome和ff支持，而用ie11是没有效果的，然后用ie11去打开智能社网页，效果也是没有，调查了一下，应该是transform-style:preserve-3d这个样式在ie11下还不支持，使得对象无法以3d的样式呈现，至于兼容方式，自己还没有花时间研究，所以这个效果暂时只能用chrome或者ff打开。
复习了一下关于时间获取的语句var t = new Date(),另外还学习了如何获取当前时间的下一段时间的方式，比如获取当前时间的前一秒，思路是要用到时间戳getTime()，就是当前时间t到1970年的毫秒数，然后加上1000即可。具体代码如下：

var t = new Date(); //获取当前时间

var t_d = t.getTime(); //获取时间戳t_d，就是t到1970年的毫秒数

var t1 = new Date();//设置t1也是当前时间，这里我自己有个疑问，因为这里t1其实和t肯定是有一点时间差的，也许这个时间实在太短，可以忽略，或者我可以把这句接在var t的下面，让时间差尽量少

); //把时间戳减少1000毫秒，通过setTime对t1进行操作，就可以让t1成为t的前一秒事件

3. will-change: transform;这个属性是可以增加css3动画的流畅度的，具体原理可以查看这篇张鑫旭的博客：http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/

4. 写js的时候还是遇到了一些代码重复的问题，就比如如何将一个函数里要用到另一个函数里的变量，该怎么写，后来想到了用传参数的方法可以解决，把另一个函数fn2里的变量用t代替写在这个函数fn1的参数中，然后在fn2里调用fn1时，把参数传进fn1里即可，详细代码可以见下面

<style>

ul{

;

list-style: none;

}

#wrap{

margin: 70px auto;

width: 800px;

height: 80px;

padding: 30px;

transform-origin: center center center;

animation: move 5s linear infinite alternate;

transform-style: preserve-3d;

will-change: transform;

}

.outerbox{

perspective: 500px;

height: 80px;

margin: 10px;

float: right;

transform-origin: center center;

transform-style: preserve-3d;

transform: rotateY(10deg);

will-change: transform;

}

.dice{

width: 80px;

height: 80px;

transform-style: preserve-3d;

% -40px;

,1.46);

position: relative;

will-change: transform;

}

.dice li{

width: 78px;

height: 78px;

border: 1px solid black;

font: 50px/80px arial;

font-weight: bold;

text-align: center;

position: absolute;

opacity: 0.4;

will-change: transform;

}

){

top: -80px;

transform-origin: bottom;

transform: rotateX(90deg);

}

){

}

){

top: 80px;

transform-origin: top;

transform: rotateX(-90deg);

}

){

transform: translateZ(-80px) rotateX(180deg);

}

){

left: 80px;

transform-origin: left;

transform: rotateY(90deg);

}

){

left: -80px;

transform-origin: right;

transform: rotateY(-90deg);

}

.dice .colon{

;

}

@keyframes move{

%{transform: rotateX(5deg) rotateY(5deg);}

%{transform: rotateX(-5deg) rotateY(-5deg);}

}

</style>

<script>

window.onload = function(){

var aUl = document.getElementsByTagName('ul');

;i<aUl.length;i++) {

;

aUl[i].onOff = true;

}

 function turn(obj,now,next){ //这里的now和next分别指的是另一个函数里要用到的变量，为了可以用它们，需要在这里先把它们当做参数写，然后在另外一个函数里调用时，将参数写进去

var aLi = obj.getElementsByTagName('li');

; i<aLi.length; i++) {

aLi[i].index = i;

}

;

){

;

}

if(obj.onOff){

aLi[obj.Index].innerHTML = now;

obj.onOff = false;

}

if(now!==next){

aLi[obj.Index_].innerHTML = now;

;

obj.style.transform = 'rotateX('+obj.angle+'deg)';

obj.Index++;

}

; i++) {

aLi[i].style.opacity = 0.2;

aLi[i].style.color = 'lightgrey';

}

){

;

}

aLi[obj.Index].style.opacity = 0.8;

aLi[obj.Index].style.color = 'black';

document.title=now+"::"+next;

}

function getTime(){

var t = new Date();

var iSec = t.getSeconds();

var iMin = t.getMinutes();

var iHour = t.getHours();

;

);

;

);

;

);

var t_d = t.getTime();

var t1 = new Date();

);

var iSec_ = t1.getSeconds();

var iMin_ = t1.getMinutes();

var iHour_ = t1.getHours();

;

);

;

);

;

);

],iSecR,iSecR_); //这里调用的时候将对应的变量传给now和next上即可

],iSecL,iSecL_);

],iMinR,iMinR_);

],iMinL,iMinL_);

],iHourR,iHourR_);

],iHourL,iHourL_);

}

getTime();

);

};

</script>

</head>

<body>

<div id="wrap">

<div class="outerbox">

<ul class="dice">

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li class="colon">:</li>

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li class="colon">:</li>

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li></li>

</ul>

</div>

</body>

</html>

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

【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）上
这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写这个效果需要用到transform-style: preserve-3d. ...
【巩固】CSS3的3D动画 ——3D旋转（1）
最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve ...
CSS3 动画3D视角下旋转圆环
首先是 transform 属性: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 加上对应属性则可得到3D透视效果下的形态本次以圆形( ...
3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
CSS3中的3D动画实现(钟摆、魔方)--实现代码
CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性 all|[attr] transition-duration 过渡时间 transition-delay ...
[web前端] css3 transition属性实现3d动画效果
cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...
css3 transition属性实现3d动画效果
transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...
css3图书3D动画
css3图书3D动画,css3,立体特效,旋转效果,3D动画,css3图书3D动画是一款基于css3实现的立体旋转3D图书动画特效. 代码下载页:http://www.huiyi8.com/sc/71 ...

随机推荐

windows下安装KeystoneJS
安装参考: http://keystonejs.com/zh/getting-started/ http://jsnoder.com/kjs/quickstart 安装前提条件: 安装 Node.JS ...
IOC-AOP
IOC,依赖倒置的意思,所谓依赖,从程序的角度看,就是比如A要调用B的方法,那么A就依赖于B,反正A要用到B,则A依赖于B.所谓倒置,你必须理解如果不倒置,会怎么着,因为A必须要有B,才可以调用B,如 ...
candence 知识积累4
一.PCB布局约束: 1.尺寸规划:PCB大小要合适,PCB太大印制线路长,阻抗增加.太小散热不好,易受干扰. 2.PCB尺寸确定后要确定特殊器件的位置. 3.尽可能缩短高频元器件之间的连线,设法减少 ...
利用GCC编译器生成动态链接库和静态链接库
转载请标明:http://www.cnblogs.com/winifred-tang94/ 1.编译过程 gcc –fPIC –c xxx.c 其中-fPIC是通知gcc编译器产生位置独立的目标代码. ...
java中的包以及内部类的介绍
1:形式参数和返回值的问题(理解) (1)形式参数: 类名:需要该类的对象抽象类名:需要该类的子类对象接口名:需要该接口的实现类对象 (2)返 ...
GridView控件中加自动排列序号
GridView控件中加自动排列序号为 Gridview 增加一个新的空白列,如下: <asp:BoundField HeaderText="序号"> < ...
JAVA环境安装
CATALINA_HOME D:\apache-tomcat-7.0.52CLASSPATH .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jarJ ...
12-16php测试题
2．以下哪个SQL语句是正确的( d )A:insert into users ('p001','张三','男'); B:create table (Code int primary key); C ...
解决 xx.h has been modified since the precompiled header 系统头文件被修改
fatal error: file '/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Dev ...
mysql 批量更新和批量插入
1. 批量更新 update table_name set field_name = CASE id WHEN id1 THEN field_value, WHEN id1 THEN field_ ...

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

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

随机推荐

热门专题