s/weixin_52984349?spm=1011.2266.3001.5343
这是上次我们设置三角形以及旋转方法的地址，又想看的小伙伴们可以去看一下，这次我们换一种简单的方法来让三角形旋转。
一、三角形旋转方法2
1、首先我们先从阿里巴巴矢量图标库下载出来我们的三角形
代码展示：
<span class="iconfont"></span>
将他放到我们想要的地方去
图片展示：
2、选中这个三角形，直接设置它的属性
font-size: 5px;//设置大小transition: all 1s; //设置旋转的时间color: red; //图标的颜色display: inline-block; 这个是必须要写的，因为图标属于伪元素，它是没有宽高的，如果不写就没有办法让它旋转。
3、给它设置hover效果
.favorites>a:hover>span{transform: rotate(180deg);}//图标旋转180度
相比之前的方法这个要简单很多，而且后期相对于也好处理一些。
二、设置箭头三角形以及旋转
1、首先我们建个盒子
<div class="example">今天学到了什么<div class="arrow"></div></div>
2、设置箭头的样式
.arrow {float:right; /* 设置右浮动让它文字的右边 */ margin-top:7px;width: 5px;height: 5px;border-top: 2px solid red;/* 上箭头大小形状颜色 */border-right: 2px solid red; /* 右箭头大小形状颜色 */transform: rotate(135deg);transition: all 0.5s ease 0s;/*all是所有属性都将获得动画效果 0.5秒完成 ease：速度逐渐变慢*/}
3、设置hover效果，让它可以旋转
.example:hover .arrow {transform: rotate(315deg);/*旋转180度*/margin-top:10px;}
同样，三角箭头也可以从阿里巴巴矢量库里下载并旋转，方法和上面相同，两者相差并不大
