码迷,mamicode.com
首页 > 其他好文 > 详细

转换(旋转)transform

时间:2017-07-03 12:20:07      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:移动   分享   web   image   orm   style   nsf   code   缩放   

div
{
transform:rotate(180deg);
-ms-transform:rotate(180deg);     /* IE 9 */
-moz-transform:rotate(180deg);     /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg);     /* Opera */
}

 

 

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

 

语法:transform:none|rotate(-8deg)...

技术分享

技术分享

 

也可以增加 keyframes 效果

 

@-webkit-keyframes spin {  
  from { -webkit-transform: rotate(0deg); }  
  to { -webkit-transform: rotate(360deg); }  
}  

@-moz-keyframes spin {  
  from { -moz-transform: rotate(0deg); }  
  to { -moz-transform: rotate(360deg); }  
}  

@-ms-keyframes spin {  
  from { -ms-transform: rotate(0deg); }  
  to { -ms-transform: rotate(360deg); }  
} 

@-o-keyframes spin {  
  from { -o-transform: rotate(0deg); }  
  to { -o-transform: rotate(360deg); }  
}

 

转换(旋转)transform

标签:移动   分享   web   image   orm   style   nsf   code   缩放   

原文地址:http://www.cnblogs.com/sutao/p/7109645.html

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