css3动画-animation之rotate

/* Timer*/

.timer{ width: 240px; height: 240px; background-color: transparent; box-shadow: inset 0px 0px 0px 2px #fff; border: 2px #f00 solid; border-radius: 50%; position: relative; margin: 38px auto; }

.timer:after, .timer:before{ position: absolute; content:""; background-color: #fff; }

.timer:after{ width: 10px; height: 2px; top: 11px; left: 11px; -webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px; transform-origin: 1px 1px; -webkit-animation: minhand 2s linear infinite; -moz-animation: minhand 2s linear infinite; animation: minhand 2s linear infinite; }

.timer:before{ width: 8px; height: 2px; top: 11px; left: 11px; -webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px; transform-origin: 1px 1px; -webkit-animation: hrhand 8s linear infinite; -moz-animation: hrhand 8s linear infinite; animation: hrhand 8s linear infinite; }

span.s1 {  position: absolute;  top:120px;  left:120px;  width: 60px;  border-top: 2px #0f0 solid;  -webkit-transform-origin: left top;  -webkit-transition-delay: 0;  -webkit-animation: minhand 3s linear infinite; }

span.s2 {  position: absolute;  top:120px;  left:120px;  width: 0px;  height: 80px;  border-left: 2px #00f solid;  -webkit-transform-origin: left top;  -webkit-transition-delay: 0;  -webkit-animation: hrhand 1s linear infinite; }

span.s3 {  position: absolute;  width: 6px;  height: 6px;  top: 117px;  left: 117px;  background: #000;  border-radius: 3px;  text-align: center;  vertical-align: middle; }

 

@-webkit-keyframes minhand{

0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)} } @-moz-keyframes minhand{ 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(360deg)} } @keyframes minhand{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

@-webkit-keyframes hrhand{ 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)} } @-moz-keyframes hrhand{ 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(360deg)} } @keyframes hrhand{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

 

 

 

 

 

<!-- 时间 -->

<div class="timer">  

　　<span class="s1"></span>

 　　<span class="s2"></span>

　　 <span class="s3"></span>

</div>

 **************

2D Transform 方法

 

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

 

转载于:https://www.cnblogs.com/lina6251125/p/3946702.html