【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表(2)上
这个是3D旋转的进阶版,是一个类似与骰子的正方体。这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写
- 这个效果需要用到
transform-style: preserve-3d
。 - 利用
transform: rotateX, rotateY, rotateZ
来定义物体转动轴,实现3D旋转 - 给一个正方体设置6个面,每个面都设置旋转基面,并且直接先朝各个方向转90度,有一个面要注意,就是和最前面的那个面的对面,不用转,但是要用
transform: translateZ()
来让这个面沿着Z轴移动到后面,同时要让这个面上的数字或者文字还要translateX(180deg)
,这样就能让背面的那个字转过来是正着的,否则它在背面是正的时候再转过来就变成倒着的了 - 为了让这个骰子有点看上去是有点往右倾斜,就想到给它
rotateY(10deg)
,但是直接加载box上会有问题,为了让它转动,已经加过一次transform:rotateX
,再加一个transform
会把这个覆盖,所以想到了,在这个box
外面再加一个outerbox
,让outerbox
往右倾斜就可以。 - 在转动一次之后,要让即将转过来的那个面的数字变成下一秒的个位数
- 复习一下如何取到一个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)上的更多相关文章
- 【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表(2)下.md
之前看到智能社主页的那个骰子样式的钟表,最近研究了一下,虽然没有仔细看他是怎么做的,但是学了css3的动画之后想自己尝试着写一下,用到的原理可能和智能社网站的不太一样,我自己主要用到了css3和js. ...
- 【巩固】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 ...
随机推荐
- Rotate Image [LeetCode]
You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...
- 树(二)——二叉树
目录 本章主要讲解内容为: 树的非递归遍历算法,两种版本 树的扩展前缀以及前缀中缀构建方法 源码 btree.cpp btree.h 基础知识 一.定义 二叉树的递归定义:二叉树是每个结点最多含有两棵 ...
- Dynamo涉及的算法和协议——p2p架构,一致性hash容错+gossip协议获取集群状态+向量时钟同步数据
转自:http://www.letiantian.me/2014-06-16-dynamo-algorithm-protocol/ Dynamo是Amazon的一个分布式的键值系统,P2P架构,没有主 ...
- scala学习笔记
一 入门 为了增加编程趣味和技能,学习新语言,体会函数式编程和简易的并发管理模型,了解日渐活跃的Spark,尝试下Scala.Scala = Scalable language,作者是Martin O ...
- 连接英文字符集的ORACLE和调用存储过程问题及64位服务器连接ORACLE问题
部署在IIS上的webservice连接英文字符集的ORACLE数据库出现问题“未在本地计算机上注册"MSDAORA.1"提供程序”,解决方案如下: 原因:如错误,64位系统未注册 ...
- adb error: device not found
我的adt无法调试一个平板,我的手机却能调试,百度了好多次,折腾了两个周,换了几个版本的adt,都不成. 就在刚才,我在设备管理器找到那个设备Samsung xxx,点更新驱动,自动搜索,那个设备就变 ...
- pycharm 使用小结
1.pycharm 自动换行,显示行号,缩进向导 在代码右侧右键 2.自动注释/取消注释 ctrl + /
- Create Linked Server SQL Server 2008
From:http://www.jensbits.com/2010/11/10/create-linked-server-sql-server-2008/ http://www.c-sharpcorn ...
- C语言基础--数组及相关
概念: 一堆相同类型的数据的有序集合 格式: 元素类型 数组名称[ 元素个数 ] 定义数组: // 定义了一个名称叫做scores的数组, 数组中可以存放3个int类型的数据 ]; // 只要定义一 ...
- 使用python 提取网页的特定数据转
http://blog.csdn.net/nwpulei/article/details/7272832