css中iconfont图标旋转

旋转的方法很多，这里使用的是transform。

transform: rotate(360deg) scale(1.2); 旋转360°，放大1.2倍

</div>

图标是阿里巴巴矢量图标库的图标。

在设置css是一定要注意将i设置为行内块元素 display: inline-block; 这个是重点，不设置行类块元素，旋转死活效果上不去。

.p1 .iconfont{

transition: All 0.5s linear ;

-webkit-transition: All 0.5s linear ;

-moz-transition: All 0.5s linear ;

-o-transition: All 0.5s linear ;

display: inline-block;

}

.p1 :hover .iconfont{

transform: rotate(360deg) scale(1.2);

-webkit-transform: rotate(360deg) scale(1.2);

-moz-transform: rotate(360deg) scale(1.2);

-o-transform: rotate(360deg) scale(1.2);

-ms-transform: rotate(360deg) scale(1.2);

}

其他元素旋转直接设置就可以

css中iconfont图标旋转相关推荐

WPF中iconfont图标库的使用
总目录文章目录总目录前言一.查找项目需要的图标二.图标的使用 1.作为字体使用 1.将项目图标,下载并解压缩 2.将ttf文件复制粘贴到自己的项目中 3.xaml中使用 4. 在代码中使用编 ...
ios label 高度紫石英_iOS中iconfont(图标字体)的基本使用
前言近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...
css中的代码图标,认识CSS中字体图标(示例代码)
前端之HTML,CSS(十一) 字体图标使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...
css中的图标字体的实现方案及原理和工具使用
方案一:利用background-position,专用名词 CSS Sprite(没啥意思就是记不住这个名字)懂原理就好. 要是面试的问我这个我肯定忘了这个单词了.. 这个也是解决前端资源优化的一种 ...
javafx中css选择器_JavaFX技巧12：在CSS中定义图标
javafx中css选择器当您是像我这样来自Swing的UI开发人员时,您很有可能仍在代码中直接设置图像/图标. 最可能是这样的: import javafx.scene.control.Label ...
JavaFX技巧12：在CSS中定义图标
当您是像我这样来自Swing的UI开发人员时,您很有可能仍在代码中直接设置图像/图标. 最可能是这样的: import javafx.scene.control.Label; import javaf ...
微信小程序中 iconfont 图标的使用（包括彩色图标）
阿里图标库的官网地址:iconfont-阿里巴巴矢量图标库 1.打开阿里巴巴矢量图标库,将自己需要的图标加入到购物车中: 2.在购物车里面将刚刚添加的图标加入到自己的项目,如果没有则按照提示创建一个项 ...
css中审核图标,一个简单实用的css loading图标
摘要在web开发中,为了提高用户体验,在加载数据的时候都会给一个loading的提示. Html .cssload-container { width: 24px; height: 24px; po ...
css实现文字/图标旋转90度/水平翻转/垂直翻转
一 css实现图片旋转90度 .icon{-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);} 二水平翻转 .icon { ...
css中设置图片旋转45度,css 实现缓和变量，鼠标悬停时元素旋转45度动画
可重复使用的变数transition-timing-function 属性,比内置更强大ease ,ease-in ,ease-out 和ease-in-out . HTML CSS :root { ...

css中iconfont图标旋转

css中iconfont图标旋转相关推荐

最新文章

热门文章