css 3によるマウスサスペンションによるdiv回転効果

1120 ワード

css 3で実現したマウスサスペンションはdiv回転効果を実現する:cssの出現により比較的絢爛たる効果を実現しjavascriptやその他の手段を適用しない場合が可能となり、もちろん現在の状況ではブラウザ互換性の問題が大きいため、本章ではしばらく考慮せず、以下にコードの例を共有する.マウスの浮遊を実現しdivの回転効果を実現します.コードは次のとおりです.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>    </title>
<style type="text/css">
.rotate{
  width:300px;
  height:300px;
  background-color:red;
  -webkit-transition:-webkit-transform 1s;
}
.rotate:hover{
  -webkit-transform:rotate(360deg);
}
</style>
</head>
<body>
<div class="rotate"></div>
</body>
</html>

上記のコードは私たちの要求を実現し、具体的には関連読書を参照することができます.
関連読書:1.Transitionプロパティは、CSS 3のtransitionプロパティの詳細を参照してください.2.transformプロパティは、CSS 3のtransformプロパティの概要を参照してください.
原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=14591
詳細については、次の項目を参照してください.http://www.softwhy.com/divcss/

条項23:オブジェクトを返す必要がある場合は、リファレンスを返さないでください.

CSS属性関連