利用CSS3的transform做的动态石英钟

近几来HTML5+CSS3,以及相关的玩乐支付都极红呀,自个儿也得跟上时期的步履,做了三个CSS3的小德姆o供我们指导。

     转自:

1、transform属性完毕了一部分可用SVG完毕的同样的效劳。它可用来内联(inline)成分和块级(block)成分。它同意大家旋转、缩放和平运动动元素,并且该因素
下的富有子成分 随着参数的安装 旋转、缩放 和平运动动。

  1. transform 与 transform-origin 使用验证
  • 眼下那多少个属性获得了除去ie以外各种主流浏览器webkit,firefox,opera的支撑,
  • 属性名分别为 -webkit-transform,-moz-transform,-o-transform;
  • transform-origin是变形原点,也等于该因素围绕着十二分点变形或旋转,该属性唯有在设置了transform属性的时候起效果;
    • 语法:-moz-transform-origin: [
      <percentage> | <length> | left | center | right ][
      <percentage> | <length> | top | center | bottom ]
      ?
    • transform-origin接受四个参数,它们能够是比例,em,px等实际的值,也足以是left,center,right,恐怕top,center,bottom等描述性参数 ;
    • 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%
    • 利用CSS3的transform做的动态石英钟。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个参数
      ,本例中未涉及;

她有几个属性值:

此时此刻这两本性格获得了主流浏览器IE,webkit,firefox,opera的帮忙,属性名分别为-ms-transform
-webkit-transform,-moz-transform,-o-transform。也可能有人会疑窦为何要加各浏览器的前缀(-ms-),自个儿感到恐怕在浏览器新本子揭橥时,此CSS属性还不曾正儿八经被W3公司当正规公布吧,所以加前缀加以差距,今后全部浏览器肯定会面併行使transform
和trandform-origin的。

(1) 
rotate(旋转)允许你通过传递四个度数值来转动两个对象;其值可取正、负。正值代表
顺时针旋转 负值代表逆时针旋转。举个例子:rotate(20deg) 顺时针旋转20度。

新型CSS标准参照网址:

(2)
scale是四个缩放作用,它使用贰个依然多个正数和负数以及小数作为参数;两参数的意思:依次x轴缩放
y轴缩放,   正数 代表放大,负数代表减弱。
当使用一个参数时表示X轴和Y轴的缩放同样;例如: scale(1.0, 0.75) 或则
scale(-0.5, 1)  或则 scale(0.5)。

IE9开荒职员辅导网址:

(3) translate正是基于X和Y
坐标重新定位成分,当使用贰个参数时表示X轴和Y轴的参数一样;参数也亮点正负,x轴:
正值代表向右移动, 负值代表 向左移动,y轴:正值代表 向下移动 , 负值
代表提升移动  。举个例子: translate(10px,-2px);

webkit开荒资料:

(4)
skew倾斜(ps中的斜切),参数是度数,当使用一个参数时表示X轴和Y轴的参数同样;

firefox开辟资料:

(5) matrix矩阵调换,便是基于X和Y
坐标重新定位成分,它采取6个参数,那特特性和线性矩阵类似,弄的本人有一点点头大,基本上用地点的几性格子就非常多了。

opera开辟资料:

2、transform-origin是变形原点,也便是该因素围绕着十三分点变形或旋转,该属性唯有在设置了transform属性的时候起效能;

transform-origin是变形原点,也正是该因素围绕着极度点变形或旋转,该属性独有在安装了transform属性的时候起效果,它承受多个参数,它们能够是比例,em,px等现实的值,也得以是left,center,right,可能top,center,bottom等描述性参数 ;它的私下认可值是四分之二 一半。

transform-origin接受五个参数,它们得以是比例,em,px等切实的值,也足以是left,center,right,恐怕top,center,bottom等描述性参数 ;

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%

语法:-moz-transform-origin: [ <percentage> | <length> |
left | center | right ][ <percentage> | <length> | top |
center | bottom ]

transform属性达成了一部分可用SVG完成的一模二样的功能。它可用来内联(inline)成分和块级(block)成分。它同意大家旋转、缩放和平运动动成分,他有多少个属性值参数:

        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%

rotate(旋转)允许你通过传递一个度数值来转动多少个指标;
scale是一个缩放功效,能够让任一成分变的越来越大。它应用二个如故五个正数和负数以及小数作为参数;当使用贰个参数时表示X轴和Y轴的缩放一样;
translate正是基于X和Y
坐标重新定位成分,当使用二个参数时表示X轴和Y轴的参数同样;
skew倾斜(ps中的斜切),参数是度数,当使用八个参数时表示X轴和Y轴的参数一样;
matrix矩阵转变,便是基于X和Y 坐标重新定位成分,它使用6个参数;

其一参数值 小编要么用百分比,em,px等具体的值
相比直观,描述性参数看的自家头大。

2.动态石英钟页面包车型客车HTML + CSS

时下那八个属性得到了除了ie以外各种主流浏览器webkit,firefox,opera的支撑,属性名分别为
-webkit-transform,-moz-transform,-o-transform;

HTML 代码:

美高梅开户网址 1 

<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。

美高梅开户网址 2美高梅开户网址 3View
Code

相关CSS代码:

1 .text-list { width: 500px; height: 460px; padding-top:15px; background: #fff; box-shadow: 5px 5px 6px #000; }
2 .text-list li { line-height: 28px; } 
3 
4 .ul-one { -moz-transform: rotate(5deg) ; } /* 针对ul设置 则整体都会有所倾斜 */
5 .one { -moz-transform: rotate(5deg) scale(1.00, 1.50); }/* 设置倾斜 和缩放*/
6 .two  a { -moz-transform: rotate(3deg) ; } /*设置li的倾斜*/
7 .three { -moz-transform: rotate(1deg); }
8 .three span { color:#f00; -moz-transform: rotate(-5deg); } /*内联元素的倾斜度*/
9 .four a { -moz-transform: skew(7deg, 8deg); }
<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:八分之四 百分之百;

美高梅开户网址 4美高梅开户网址 5View
Code

3.页面的Javascript的实现

 1  <div class="text-list">
 2     <ul class="ul-one">
 3     <li>li的列表</li>
 4     <li><a href="#">缩放大小比例</a></li>
 5     <li><a href="#">旋转角度</a>缩放大小比例</li>
 6     <li><a href="#">倾斜比例</a></li>
 7     </ul>
 8     <ul>
 9     <li class="one">设置字体的倾斜度 rotate(5deg) 和 缩放比例 scale(1.00, 1.50); </li>
10     <li class="two"><a href="#">倾斜度</a></li>
11     <li class="three"><a href="#">这个外层元素已经设倾斜了</a>对span有设置了倾斜 两者没有影响</li>
12     <li class="four"><a href="#">字体的斜切变换</a></li>
13     </ul>
14  </div>

极致首要的是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>  

美高梅开户网址 6

 

美高梅开户网址 ,唯独笔者又发轫思量叁个主题素材: 笔者把它(transform)变形了
会不会潜移暗化另外因素的布局啊。

末段效果演示:

看看那吗


美高梅开户网址 7美高梅开户网址 8View
Code

1 <p class="p-con">transform 的各个属性的用法</p>
2  <p>变形后 会不会影响页面的布局呢?</p>
3  <p>咦?不影响,而且在其他元素的上面,怎么感觉好像是设置了绝对位置啊,可是明明我没有设置啊,这是为什么呢</p>

美高梅开户网址 9美高梅开户网址 10View
Code

1 .p-con { font-weight: bold; color: #f00; -moz-transform: rotate(15deg) scale(1.5, 1.5) skew(5deg, 8deg) translate(5px,-2px); -moz-transform-origin: 0  5px; }

功效如下

美高梅开户网址 11

谜底是 不影响,何况本身也实在没设置它是相对地方,笔者在FF浏览器看他的协会,开采那样的 景况:
它事实上的结构地点依然在原本的地点,而小编辈看出确实是倾斜的。那是怎么吗?

美高梅开户网址 12

css
CSS3

来源:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图