.trans-rotate{ -webkit-transition: transform .25s linear; -moz-transition: transform .25s linear; -o-transition: transform .25s linear; transition: transform .25s linear; }/* 加上這個樣式后,才會在0.25秒內旋轉完畢。否則只會顯示立刻旋轉完的結果 */ .btnbg:hover{transform:rotate(360deg);} /* 鼠標移上去后,旋轉*/
在需要旋轉的元素上加上 class="btnbg trans-rotate"
web前端鼠標經過圖片凸起
在需要這種特效的img標簽上加上class=".img-aoqi"
.img-aoqi{ -webkit-transition: all ease-out .5s; -o-transition: all ease-out .5s; transition: all ease-out .5s; -ms-transition: all ease-out .5s; } .img-aoqi:hover{ -webkit-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08); -ms-transform: scale(1.08) }