今天小编跟大家讲解下有关利用CSS3的transform做的动态时钟效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关利用CSS3的transform做的动态时钟效果 的相关资料，希望小伙伴们看了有所帮助。
1. transform 与 transform-origin 使用说明 目前这两个属性得到了主流浏览器IE webkit firefox opera的支持 属性名分别为-ms-transform -webkit-transform -moz-transform -o-transform。可能有人会疑问为什么要加各浏览器的前缀（-ms-）,本人认为可能在浏览器新版本发布时 此CSS属性还没有正式被W3组织当标准发布吧 所以加前缀加以区分 以后所有浏览器肯定会统一使用transform 和trandform-origin的。最新CSS标准参考网站：http://www.w3.org/Style/CSS/current-work。IE9开发人员指导网站：http://msdn.microsoft.com/en-us/ie/ff468705。webkit开发资料：http://www.webkit.org/projects/documentation/index.html http://developer.apple.com/devcenter/safari/index.action。firefox开发资料：https://developer.mozilla.org/En/Developer_Guide。opera开发资料：http://dev.opera.com/articles/view/wcl-developer-guide/。transform-origin是变形原点 也就是该元素围绕着那个点变形或旋转 该属性只有在设置了transform属性的时候起作用 它接受两个参数 它们可以是百分比 em px等具体的值 也可以是left,center,right 或者 top,center,bottom等描述性参数 ；它的默认值是50% 50%。 top left | left top 等价于 0 0； top | top center | center top 等价于 50% 0 right top | top right 等价于 100% 0 left | left center | center left 等价于 0 50% center | center center 等价于 50% 50%（默认值） right | right center | center right 等价于 100% 50% bottom left | left bottom 等价于 0 100% bottom | bottom center | center bottom 等价于 50% 100% bottom right | right bottom 等价于 100% 100% transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素 他有几个属性值参数： rotate(旋转)允许你通过传递一个度数值来转动一个对象； scale是一个缩放功能 可以让任一元素变的更大。它使用一个或者两个正数和负数以及小数作为参数；当使用一个参数时表示X轴和Y轴的缩放相同； translate就是基于X和Y 坐标重新定位元素 当使用一个参数时表示X轴和Y轴的参数相同； skew倾斜（ps中的斜切） 参数是度数 当使用一个参数时表示X轴和Y轴的参数相同； matrix矩阵变换 就是基于X和Y 坐标重新定位元素 它使用6个参数； 2.动态时钟页面的HTML + CSS HTML 代码： 复制代码代码如下: <div id="clock"> <div id="dot"></div> <div id="second"class="needle"> <div id="second_needle"> </div> </div> <div id="minute"class="needle"> <div id="minute_needle"> </div> </div> <div id="hour"class="needle"> <div id="hour_needle"> </div> </div> </div> 代码中各个DIV的含义就不解释了 相信大家都看得懂。HTML还是挺简单的 起作用的还得看CSS。 相关CSS代码： 复制代码代码如下: <style type="text/css"> #clock{ width: 200px; height: 200px; border: 1px solid black; border-radius: 100px; position:relative; margin:0 auto; background-color:#eee; } #dot{ border-radius:2px; width: 8px; height: 8px; position:absolute; top: 0; bottom: 0; margin: auto; left: 0; right: 0; background: black; } .needle { -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin:50% 100%; } #second{ position:relative; z-index:5; height: 80px; width: 1px; margin: 20px auto; } #second_needle{ height: 100%; width: 100%; position: relative; background: green; } #minute{ z-index:4; height: 60px; width: 4px; position: absolute; top: 40px; left: 0px; right: 0px; margin: auto; } #minute_needle{ height: 100%; width: 100%; background: blue; } #hour{ z-index:3; height: 40px; width: 8px; position: absolute; top: 60px; left: 0px; right: 0px; margin: auto; } #hour_needle{ height: 100%; width: 100%; background: red; } </style> 这里说明下几个关键的CSS属性：#clock 里面的块元素的 position:absolute;然后再用top; bottom; margin; left; right; 才能准确定位 各个指钟的旋转原点为底部的中点：transform-origin:50% 100%; 3.页面的Javascript的实现 最为关键的是JS代码了： 复制代码代码如下: <script type="text/javascript"> //初始化各指钟的位置 window.onload = function(){ var date = new Date(), second = date.getSeconds(), minute = date.getMinutes(), minuteDeg, hour = date.getHours(), hourDeg; var secondrotate = 'rotate('+second*6+'deg)'; var scss = '-moz-transform:' + secondrotate + ';-o-transform:' + secondrotate + ';-ms-transform:' + secondrotate; //对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义? document.getElementById('second').style.cssText = scss; document.getElementById('second').style.webkitTransform = secondrotate; minuteDeg = minute*6 + second*6/60; var minuterotate = 'rotate('+minuteDeg+'deg)'; var minutecss = '-moz-transform:' + minuterotate + ';-o-transform:' + minuterotate + ';-ms-transform:' + minuterotate ; document.getElementById('minute').style.cssText = minutecss; document.getElementById('minute').style.webkitTransform = minuterotate; //对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义? if(hour>12){ hour = hour -12; } hourDeg = hour * 30 + minute*30/60; var hourtrotate = 'rotate('+hourDeg+'deg)'; var hcss = '-moz-transform:' + hourtrotate + ';-o-transform:' + hourtrotate + ';-ms-transform:' + hourtrotate; document.getElementById('hour').style.cssText = hcss; document.getElementById('hour').style.webkitTransform = hourtrotate; //对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义? }; //周ü期ú性?改?变?秒?钟ó的?位?置? setInterval(function(){ var date = new Date(), second = date.getSeconds(); var secondrotate = 'rotate('+second*6+'deg)'; var scss = '-moz-transform:' + secondrotate + ';-o-transform:' + secondrotate + ';-ms-transform:' + secondrotate ; document.getElementById('second').style.cssText = scss; document.getElementById('second').style.webkitTransform = secondrotate; //对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义? },1000) //周ü期ú性?改?变?分?钟ó的?位?置? setInterval(function(){ var date = new Date(), second = date.getSeconds(), minute = date.getMinutes(), minuteDeg; minuteDeg = minute*6 + second*6/60; var minuterotate = 'rotate('+minuteDeg+'deg)'; var minutecss = '-moz-transform:' + minuterotate + ';-o-transform:' + minuterotate + ';-ms-transform:' + minuterotate ; document.getElementById('minute').style.cssText = minutecss; document.getElementById('minute').style.webkitTransform = minuterotate; //对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义? },6000) //周ü期ú性?改?变?时±钟ó的?位?置? setInterval(function(){ var date = new Date(), second = date.getSeconds(), minute = date.getMinutes(), hour = date.getHours(), hourDeg; if(hour>12){ hour = hour -12; } hourDeg = hour * 30 + minute*30/60; var hourtrotate = 'rotate('+hourDeg+'deg)'; var hcss = '-moz-transform:' + hourtrotate + ';-o-transform:' + hourtrotate + ';-ms-transform:' + hourtrotate; document.getElementById('hour').style.cssText = hcss; document.getElementById('hour').style.webkitTransform = hourtrotate; //对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义? },360000) </script> 请在支持CSS3的浏览器中查看,如:firefox, Chrome….,但IE9看不到效果,本地单独运行页面能看到效果
来源：爱蒂网
