css3 transform rotate-2D旋转

2019独角兽企业重金招聘Python工程师标准>>>

/*div 旋转同时放大*/
.box
{ 
width:100px;
height:100px; 
background:#F90;
transition:width 2s, height 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
}
.box:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-webkit-transform: rotate(180deg);/* Safari 和 Chrome */
}

/*icon图标型*/
.box2
{ 
width:32px;
height:32px; 
-webkit-transition: -webkit-transform 0.5s; /* Safari and Chrome */
}
.box2:hover
{
transform:rotate(180deg);
-webkit-transform: rotate(90deg);/* Safari 和 Chrome */
}

<div class="box">transform-2D旋转</div>
<div class="box2"><img src="icon_arrow.png"></div>

转载于:https://my.oschina.net/u/583531/blog/310065