有很多朋友都說字體 圖片以及一些簡單動畫 要做旋轉效果 都說要用js或者jq 才能去做這個特效。。

今天我們用css 就直接做旋轉特效。話不多說 直接上代碼

?css樣式

??????? div{
??????????? width:120px;
??????????? height:120px;
??????????? line-height:120px;
??????????? margin: 20px;
??????????? background-color: #5cb85c;
??????????? float: left;
??????????? font-size: 12px;
??????????? text-align: center;
??????????? color:orangered;
??????? }

?????? /*效果一：360°旋轉 修改rotate(旋轉度數)*/
??????? .img1 {
??????????? transition: All 0.4s ease-in-out;
??????????? -webkit-transition: All 0.4s ease-in-out;
??????????? -moz-transition: All 0.4s ease-in-out;
??????????? -o-transition: All 0.4s ease-in-out;
??????? }

??????? .img1:hover {
??????????? transform: rotate(360deg);
??????????? -webkit-transform: rotate(360deg);
??????????? -moz-transform: rotate(360deg);
??????????? -o-transform: rotate(360deg);
??????????? -ms-transform: rotate(360deg);

??????? }

<div class="img1">效果一：360°旋轉 </div>

這樣旋轉代碼就出來了

總結

以上是生活随笔為你收集整理的css动画旋转代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。