码迷,mamicode.com
首页 > Web开发 > 详细

css3 transform: rotate()

时间:2014-08-31 15:48:01      阅读:520      评论:0      收藏:0      [点我收藏+]

标签:blog   http   color   os   使用   io   ar   for   2014   

bubuko.com,布布扣

 

/*help*/

.help{  position: relative;     width: 130px;     height: 130px;     border: 6px #fff solid;  border-radius: 50%;     -webkit-animation: rotation 1s ease-in-out infinite;        -moz-animation: rotation 1s ease-in-out infinite;             animation: rotation 1s ease-in-out infinite;     margin: 60px auto 0; } .help:after{     width: 15px;     height: 15px;     background-color: #fff;     border-radius: 50%;     position: absolute;  left: 0px;  top: 57px;     content: ""; } @-webkit-keyframes rotation{     0%{-webkit-transform: rotate(0deg);}     100%{-webkit-transform: rotate(360deg);} } @-moz-keyframes rotation{     0%{-moz-transform: rotate(0deg);}     100%{-moz-transform: rotate(360deg);} } @keyframes rotation{     0%{transform: rotate(0deg);}     100%{transform: rotate(360deg);} }

 

<!-- Typing Loader -->

<div class="typing">

 <div class="help">

   </div>

</div>

 ********

语法

transform: none|transform-functions;
描述测试
none 定义不进行转换。 测试
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。 测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。  
translate(x,y) 定义 2D 转换。 测试
translate3d(x,y,z) 定义 3D 转换。  
translateX(x) 定义转换,只是用 X 轴的值。 测试
translateY(y) 定义转换,只是用 Y 轴的值。 测试
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。  
scale(x,y) 定义 2D 缩放转换。 测试
scale3d(x,y,z) 定义 3D 缩放转换。  
scaleX(x) 通过设置 X 轴的值来定义缩放转换。 测试
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 测试
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。  
rotate(angle) 定义 2D 旋转,在参数中规定角度。 测试
rotate3d(x,y,z,angle) 定义 3D 旋转。  
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 测试
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 测试
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 测试
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 测试
perspective(n) 为 3D 转换元素定义透视视图。 测试

 

 

css3 transform: rotate()

标签:blog   http   color   os   使用   io   ar   for   2014   

原文地址:http://www.cnblogs.com/lina6251125/p/3947705.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!