3D时间显示

原创 彭淇  2017-09-13 10:30:27  阅读 1338 次 评论 2 条

js获取时间与css3 3D属性做出的3D旋转时间

QQ截图20170914102954.png


源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css3 3D变换-JavaScript时间对象</title>
  <style type="text/css">
  *{ 
    margin: 0;
    padding: 0;
   }
   html,
   body{
    width: 100%;
    height: 100%;
    font: 20px "microsoft yahei";
   }
   body{
    perspective: 1500px;
    background: #000;
    font-family: "microsoft yahei";
    color: #fff;
   }
   #xbox{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    margin: -50px 0 0 -350px;
    text-align: justify;
    transform: rotateZ(0deg);
    animation: 4s mov infinite;
   }
   #xbox:after{
    content: "";
    display: inline-block;
    width: 100%;
    height: 0;
   }
   .rotate{
    transform-style: preserve-3d;
    display: inline-block;
    width: 50px;
    height: 50px;
    transition: 1s;
    transform: rotateX(0deg);
   }
   .box{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 50px;
    backface-visibility: hidden;
    -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.6));
   }
   .front,
   .case-front{
    box-shadow: inset 0 0 10px #eeaeff;
    transform: translateZ(25px);
   }
   .bottom,
   .case-bottom{
    box-shadow: inset 0 0 10px #88D5FF;
    transform-origin: bottom;
    transform: translateZ(-25px) rotateX(-90deg);
   }
   .back,
   .case-back{
    box-shadow: inset 0 0 10px #ECA6FF;
    transform: translateZ(-25px) rotateX(-180deg);
   }
   .top,
   .case-top{
    box-shadow: inset 0 0 10px #FFD6AE;
    transform-origin: top;
    transform: translateZ(-25px) rotateX(90deg);
   }
   .colon{
    animation: 1s flash infinite;
   }
   @keyframes flash{
    form{ color: #fff; }
    to{ color: #000; }
   }
  </style>
</head>
<body>
  <div id="xbox">
    <!-- 时 -->
    <div class="rotate wrap">
      <div class="box front case"></div>
      <div class="box bottom case"></div>
      <div class="box back case"></div>
      <div class="box top case"></div>
    </div>
    <div class="rotate wrap">
      <div class="box front case"></div>
      <div class="box bottom case"></div>
      <div class="box back case"></div>
      <div class="box top case"></div>
    </div>
    <div class="rotate colon">
      <div class="box case-front">:</div>
      <div class="box case-bottom"></div>
      <div class="box case-back">:</div>
      <div class="box case-top"></div>
    </div>
     <!-- 分 -->
    <div class="rotate wrap">
      <div class="box front case"></div>
      <div class="box bottom case"></div>
      <div class="box back case"></div>
      <div class="box top case"></div>
    </div>
    <div class="rotate wrap">
      <div class="box front case"></div>
      <div class="box bottom case"></div>
      <div class="box back case"></div>
      <div class="box top case"></div>
    </div>
    <div class="rotate colon">
      <div class="box case-front">:</div>
      <div class="box case-bottom"></div>
      <div class="box case-back">:</div>
      <div class="box case-top"></div>
    </div>
    <!-- 秒 -->
    <div class="rotate wrap">
      <div class="box front case"></div>
      <div class="box bottom case"></div>
      <div class="box back case"></div>
      <div class="box top case"></div>
    </div>
    <div class="rotate wrap">
      <div class="box front case"></div>
      <div class="box bottom case"></div>
      <div class="box back case"></div>
      <div class="box top case"></div>
    </div> 
  </div>
  <script>
    var oXbox = document.getElementById('xbox');
    var aWrap = document.getElementsByClassName('wrap');
    var aFront = document.getElementsByClassName('front');
    var aBottom = document.getElementsByClassName('bottom');
    var aBack = document.getElementsByClassName('back');
    var aTop = document.getElementsByClassName('top');
    var str = '';
    setInterval(timer,1000);
    timer();
    function timer(){
      // 获取时间
      var myTime = new Date();
      var iYear = myTime.getFullYear();
      var iMonth = myTime.getMonth()+1;
      var iDay = myTime.getDate();
      var iHours = myTime.getHours();
      var iMin = myTime.getMinutes();
      var iSec = myTime.getSeconds();
      str = toTwo( iHours ) + toTwo( iMin ) + toTwo( iSec );
      for( var i=0; i<aFront.length; i++ ){
        var _n = str.charAt(i);
        // 为4面选择显示对应的数字
        if( _n == 0 || _n == 4 || _n == 8 )aFront[i].innerHTML = _n;
        if( _n == 1 || _n == 5 || _n == 9 )aBottom[i].innerHTML = _n;
        if( _n == 2 || _n == 6 )aBack[i].innerHTML = _n;
        if( _n == 3 || _n == 7 )aTop[i].innerHTML = _n;
        aWrap[i].style.cssText = 'transform:rotateX('+ _n*90 +'deg)';
      }
    }
    function toTwo( n ){ return n<10 ? '0' + n : '' + n; }
  </script>
</body>
</html>

本文地址:http://pengqi.club/blog/108.html
版权声明:本文为原创文章,版权归 彭淇 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

评论列表

  1. 齐鲁
    齐鲁 【县长】  @回复

    [code][S19]好羞射,文章真的好赞啊,顶博主![/code]

  2. 彭淇
    彭淇 【站务管理】  @回复

    [code][S19]好羞射,文章真的好赞啊,顶博主![/code]