css控制div元素旋轉指定角度程式碼例項

admin發表於2017-02-17
原文網址 : https://www.softwhy.com/article-1123-1.html
CSS
本章節介紹一下如何利用css3實現控制元素旋轉指定角度的效果。

在這裡我們們就不考慮低版本的瀏覽器，因為隨著時間的推移，低版本的瀏覽器會被逐漸淘汰，就算是當前，低版本瀏覽器的使用者的佔比也是很少了，下面直接看程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  width:100px;
  height:100px;
  background:#999;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的程式碼實現了我們的要求，程式碼比較簡單，這裡就不多介紹了。

transform屬性可以參閱CSS3 transform屬性一章節。

相關文章