【学】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;

transform-origin: 50% 50% -49px;

transition: 0.3s cubic-bezier(.18,.95,.65,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 angle = 0;

var Index = 0;

var aDiv = oBox.getElementsByTagName('div');

for (var i=0; i<aDiv.length; i++) {

aDiv[i].index = i;

}

function rote(){

var oDate = new Date();

var iSec = oDate.getSeconds();

var iSecS = iSec - parseInt(iSec/10)*10;

var iSecD = parseInt(iSec/10);

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

angle -= 90;

if(Index===4){

Index=0;

}

document.title=iSecS;

aDiv[Index].innerHTML = iSecS;

Index++;

}

rote();

setInterval(rote,1000);

};

</script>

</head>

<body>

<div id="wrap">

<div id="outerbox">

<div id="box">

<div></div>

</div>

</body>

posted on 2016-06-26 09:30 蓝色幻想728 阅读(239) 评论(0) 收藏举报

刷新页面返回顶部

蓝色幻想728

公告